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

原创 2015年11月19日 20:45:07

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

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

android_UI进阶之style和theme的使用

  • 2013年12月22日 16:06
  • 31KB
  • 下载

Android进阶UI之加载数据等待时,小人奔跑进度动画对话框

1 概述Android中,常见的动画模式有两种:一种是帧动画(Frame Animation),一种是补间动画(Tween Animation)。帧动画是提供了一种逐帧播放图片的动画方式,播放事先做好...

android 进阶之注解框架搭建

  • 2016年04月06日 16:11
  • 2.74MB
  • 下载

android UI进阶之弹窗的使用(2)--实现通讯录的弹窗效果

相信大家都体验过android通讯录中的弹窗效果。如图所示: android中提供了QuickContactBadge来实现这一效果。这里简单演示下。 首先创建布局文件: x...

android UI进阶之自定义组合控件

fooCoder 博客园首页新随笔联系订阅 管理 随笔 - 32 文章 - 0 评论 - 185 android UI进阶之自定义组合控件 好久没写博客了。实在是忙不过来,不过再不总结总结真的不...
  • aicpzl
  • aicpzl
  • 2016年08月09日 11:42
  • 637

android UI进阶之用ViewPager实现欢迎引导页面

ViewPager需要android-support-v4.jar这个包的支持,来自google提供的一个附加包。大家搜下即可。 ViewPager主要用来组织一组数据,并且通过左右滑动的方式来展示...

android UI进阶之弹窗的使用

年就算过完啦。新年第一篇来讲下android中的PopupWindow。姑且就叫做弹窗吧,其实和AlertDialog一样,也是一种对话框,两者也经常混用,但是也各有特点。 下面就看看使用方法。首先...

Android进阶UI之5.0——过渡动画

1 概述在Android5.x中,Google对动画效果进行了更深一步的诠释,为Activity的转场效果设计了更加丰富的动画效果。Android5.x提供了三种Transition类型。 1、进...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Android进阶-复杂的UI框架(一)
举报原因:
原因补充:

(最多只允许输入30个字)