关闭

Android进阶-复杂的UI框架(一)

标签: androidui框架
202人阅读 评论(0) 收藏 举报
分类:

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

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:58360次
    • 积分:2364
    • 等级:
    • 排名:第16362名
    • 原创:179篇
    • 转载:27篇
    • 译文:0篇
    • 评论:3条
    最新评论