Android进阶-复杂的UI框架（一）

Android进阶-复杂的UI框架（一）

先来看一下， 要构建的这个比较复杂的UI框架的大体构建， 与其所构建的页面

• 
  
• 主页面的构建
  
  

• 在MainActivity中使用Fragment: LeftFragment 与 ContentFragment
  
• 为了以后数据沟通的方便， 在MainActivity中暴露了两个Fragment的访问方法

    //在绑定Fragment时， 给它增加了Tag    
    fmTransaction.replace(R.id.fgLeftMenu, new LeftFragment(), FG_LEFT_MENU);
    fmTransaction.replace(R.id.fl_content, new ContentFragment(), FG_CONTENT);

     // 获取侧边栏fragment
        public LeftFragment getLeftMenuFragment() {
           FragmentManager fm = getFragmentManager();
            LeftFragment fragment = (LeftFragment) fm
                    .findFragmentByTag(FG_LEFT_MENU);

            return fragment;
        }

        // 获取主页面fragment
        public ContentFragment getContentFragment() {
            FragmentManager fm = getFragmentManager();
            ContentFragment fragment = (ContentFragment) fm
                    .findFragmentByTag(FG_CONTENT);
            return fragment;
        }

• ContentFragment的构建
  

• 如图所示， 利用RadioGroup和ViewPager
• 完成了可用通过点击RadioButton来切换界面的效果
• 代码中应注意的点都有
  
  • 如何设置RadioButton是这种样式
  • 禁掉ViewPager的滑动事件， 并去除其界面切换的动画效果

    //在布局文件中对RadioButton的样式是这样设置的：
    android:button = "@null"  <!-- 即去除原生的圆圈点击的样子-->
    android:drawableTop="@drawable/btn_tab_home_selector"  <!-- 把图片设置在上面-->
    //对于ViewPager滑动事件的去除方式是通过继承ViewPager，并重写onTouchEcent()方法
    public class NoScrollViewPager extends ViewPager {
        /*.......*/
        /**
         * 重写onTouchEvent事件,什么都不用做
         */
        @Override
        public boolean onTouchEvent(MotionEvent arg0) {
            return false;
        }
    }
    //通过对RadioButton的点击实现界面切换，并去除动画效果可以这样实现：
    // 监听RadioGroup的选择事件
        rgGroup.setOnCheckedChangeListener(new OnCheckedChangeListener() {

            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                switch (checkedId) {
                case R.id.rb_home:
                    mViewPager.setCurrentItem(0, false);// false去掉切换页面的动画
                    break;
                    /*...............................*/
                }
            }
        });

• 对于ViewPager中的内容，每个RadioButton对应的界面都是不一样的，但是，仔细观察，还是可以抽取出一个
  BasePager，作为5个RadioButton对应界面的基类
• 这个BasePager中抽取出来的公共布局，是 标题， 内容， 标题上的菜单按钮

    //XML布局， 如下所示
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/title_red_bg" >

        <TextView
            android:id="@+id/tv_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:text="智慧北京"
            android:textColor="#fff"
            android:textSize="22sp" />

        <ImageButton
            android:id="@+id/btn_menu"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginLeft="5dp"
            android:background="@null"
            android:src="@drawable/img_menu" />
    </RelativeLayout>

    <FrameLayout
        android:id="@+id/fl_content"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" >
    </FrameLayout>

    </LinearLayout>

    //java代码
    public class BasePager {
        public Activity mActivity;   //便于数据沟通交流
        public View mRootView;// 布局对象
        public TextView tvTitle;// 标题对象
        public FrameLayout flContent;// 内容
        public ImageButton btnMenu;// 菜单按钮
        public BasePager(Activity activity) {
            mActivity = activity;
            initViews();      //这样，每个子类实例，就都会调用它，得到他所需要的控件对象了
        }

        /**
         * 初始化布局
         */
        public void initViews() {
            mRootView = View.inflate(mActivity, R.layout.base_pager, null);
            tvTitle = (TextView) mRootView.findViewById(R.id.tv_title);
            flContent = (FrameLayout) mRootView.findViewById(R.id.fl_content);
            btnMenu = (ImageButton) mRootView.findViewById(R.id.btn_menu);
        }

        /**
         * 初始化数据
         */
        public void initData() {
        }
    }

• 主页下面的5个子页面具体内容的构建

• 首先， 所应展示的具体内容，依赖于用户对侧边栏的专题的选择
• 内容展示的地方，位于上面所构建的主页面的FrameLayout中， 即 public FrameLayout flContent;
• 由牵扯到侧边栏， 因此这里的数据交流发生在Fragment之间， 如何交流看代码
• 对于，内容的展示，也是可以进行base页面的抽取的
  //依赖侧边栏，填充具体内容
  //监听，侧边栏，ListView的点击事件

    lvList.setOnItemClickListener(new OnItemClickListener() {

        @Override
        public void onItemClick(AdapterView<?> parent, View view,
                int position, long id) {
            mCurrentPos = position;
            mAdapter.notifyDataSetChanged();
            setCurrentMenuDetailPager(position);  //切换详情页（子页面的具体内容）
        }
    });

/**
 * 设置当前菜单详情页， 
 */

    protected void setCurrentMenuDetailPager(int position) {
        MainActivity mainUi = (MainActivity) mActivity;   //Activity作为Fragment之间交流的中枢
        ContentFragment fragment = mainUi.getContentFragment();// 获取主页面fragment
        NewsCenterPager pager = fragment.getNewsCenterPager();// 获取新闻中心页面
        pager.setCurrentMenuDetailPager(position);// 设置当前菜单详情页
    }

/**
     * 设置当前菜单详情页
     */
    public void setCurrentMenuDetailPager(int position) {
        BaseMenuDetailPager pager = mPagers.get(position);// 获取当前要显示的菜单详情页
        flContent.removeAllViews();// 清除之前的布局， 防止遮盖， 一了百了
        flContent.addView(pager.mRootView);// 将菜单详情页的布局设置给帧布局
        // 设置当前页的标题
        NewsMenuData menuData = mNewsData.data.get(position);
        tvTitle.setText(menuData.title);
        pager.initData();// 初始化当前页面的数据
    }

> 对 BaseMenuDetailPager（详情页的基类）的抽取， 主要抽出了mRootView， 这样有利于详情内容的实现
    public abstract class BaseMenuDetailPager {

        public Activity mActivity;
        public View mRootView;// 根布局对象
        public BaseMenuDetailPager(Activity activity) {
            mActivity = activity;
            mRootView = initViews();
        }   
        /**
         * 初始化界面
         */
        public abstract View initViews();

        /**
         * 初始化数据
         */
        public void initData() {

        }
    }

• 对详情页内容的布局
  

  • 可以看出，详情页的内容布局是： ViewPager 和 ViewPagerIndicator

• 详情页中ViewPager的子View

  它的里面又包裹了一个ViewPager和ListView