智慧北京开发第二天（上）

主页面框架 & RadioButton

主页面布局分析：

fragment_content.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical">    <android.support.v4.view.ViewPager        android:id="@+id/vp_content"        android:layout_width="match_parent"        android:layout_height="0dp"        android:layout_weight="1">    </android.support.v4.view.ViewPager>    <RadioGroup        android:id="@+id/rb_group"        android:layout_width="match_parent"        android:layout_height="80dp"        android:background="@drawable/bottom_tab_bg"        android:orientation="horizontal">        <RadioButton            android:id="@+id/rb_home"            style="@style/BottomRadioButtonStyle"            android:drawableTop="@drawable/tab_home_button_selector"            android:text="首页" />        <RadioButton            android:id="@+id/rb_news"            style="@style/BottomRadioButtonStyle"            android:drawableTop="@drawable/tab_news_button_selector"            android:text="新闻中心" />        <RadioButton            android:id="@+id/rb_smart"            style="@style/BottomRadioButtonStyle"            android:drawableTop="@drawable/tab_smart_button_selector"            android:text="智慧服务" />        <RadioButton            android:id="@+id/rb_govaffairs"            style="@style/BottomRadioButtonStyle"            android:drawableTop="@drawable/tab_govaffairs_button_selector"            android:text="政务" />        <RadioButton            android:id="@+id/rb_setting"            style="@style/BottomRadioButtonStyle"            android:drawableTop="@drawable/tab_setting_button_selector"            android:text="设置" />    </RadioGroup></LinearLayout>

RadioButton必须指明id, 否则RadioGroup无法保证每次只选一个

styles.xml

 <!--主页底部选择按钮的样式-->    <style name="BottomRadioButtonStyle">        <item name="android:layout_width">wrap_content</item>        <item name="android:layout_height">wrap_content</item>        <item name="android:layout_gravity">center_vertical</item>        <item name="android:button">@null</item>        <item name="android:drawablePadding">3dip</item>        <item name="android:padding">5dp</item>        <item name="android:gravity">center</item>        <item name="android:layout_weight">1</item>        <item name="android:textColor">@drawable/bottom_tab_button_selector</item>        <!--设置背景为透明的-->        <item name="android:background">@android:color/transparent</item>    </style>

bottom_tab_button_selector.xml

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:state_pressed="true" android:color="#f00"/>    <item  android:color="#fff"/></selector>

效果图：

主页下5个子页面的实现

ViewPager页面布局详解：

base_pager.xml

<?xml version="1.0" encoding="utf-8"?><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">        <ImageButton            android:id="@+id/ib_menu"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_centerVertical="true"            android:layout_marginLeft="10dp"            android:background="@drawable/img_menu" />        <TextView            android:id="@+id/tv_title"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_centerInParent="true"            android:text="智慧北京"            android:textColor="#fff"            android:textSize="20sp" />    </RelativeLayout>    <FrameLayout        android:id="@+id/fl_content"        android:layout_width="match_parent"        android:layout_height="0dp"        android:layout_weight="1">    </FrameLayout></LinearLayout>

效果图：

BasePager.java

package com.xbmu.wisdombj.base;import android.app.Activity;import android.view.View;import android.widget.FrameLayout;import android.widget.ImageButton;import android.widget.TextView;import com.jeremyfeinstein.slidingmenu.lib.SlidingMenu;import com.xbmu.wisdombj.MainActivity;import com.xbmu.wisdombj.R;/** * 主页下5个子页面的基类 * Created by Administrator on 2016/2/5 0005. */public class BasePager {    public Activity mActivity;    public View rootView;    public TextView tvTitle;    public FrameLayout flContent;    public ImageButton ibMenu;    public BasePager(Activity activity) {        mActivity = activity;        initView();    }    /**     * 初始化布局     */    public void initView(){        rootView = View.inflate(mActivity, R.layout.base_pager, null);        tvTitle = (TextView) rootView.findViewById(R.id.tv_title);        flContent = (FrameLayout) rootView.findViewById(R.id.fl_content);        ibMenu = (ImageButton) rootView.findViewById(R.id.ib_menu);    }    /**     * 初始化数据     */    public void initData(){    }    /**     * 设置侧边栏的打开或者关闭     * @param enable     */    public void setSlidingMenuEnable(boolean enable){        MainActivity mainActivity = (MainActivity) mActivity;        SlidingMenu slidingMenu = mainActivity.getSlidingMenu();        if(enable){            slidingMenu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);        }else{            slidingMenu.setTouchModeAbove(SlidingMenu.TOUCHMODE_NONE);        }    }}

HomePager.java

package com.xbmu.wisdombj.base.impl;import android.app.Activity;import android.graphics.Color;import android.view.Gravity;import android.view.View;import android.widget.TextView;import com.jeremyfeinstein.slidingmenu.lib.SlidingMenu;import com.xbmu.wisdombj.MainActivity;import com.xbmu.wisdombj.base.BasePager;/** * Created by Administrator on 2016/2/5 0005. */public class HomePager extends BasePager {    public HomePager(Activity activity) {        super(activity);    }    @Override    public void initData() {        tvTitle.setText("智慧北京");        ibMenu.setVisibility(View.GONE);        setSlidingMenuEnable(false);        TextView tvContent = new TextView(mActivity);        tvContent.setTextSize(20);        tvContent.setText("首页");        tvContent.setTextColor(Color.RED);        tvContent.setGravity(Gravity.CENTER);        flContent.addView(tvContent);    }}

其他四个页面和HomePager差不多。

使用开源项目XutilsLiarbry。

ContentFragment.java

package com.xbmu.wisdombj.fragment;import android.support.v4.view.PagerAdapter;import android.support.v4.view.ViewPager;import android.view.View;import android.view.ViewGroup;import android.widget.RadioGroup;import com.lidroid.xutils.ViewUtils;import com.lidroid.xutils.view.annotation.ViewInject;import com.xbmu.wisdombj.R;import com.xbmu.wisdombj.base.BasePager;import com.xbmu.wisdombj.base.impl.GovaffairsPager;import com.xbmu.wisdombj.base.impl.HomePager;import com.xbmu.wisdombj.base.impl.NewsCenterPager;import com.xbmu.wisdombj.base.impl.SettingPager;import com.xbmu.wisdombj.base.impl.SmartServicePager;import java.util.ArrayList;import java.util.List;/** * 主页面Fragment * Created by Administrator on 2016/2/4 0004. */public class ContentFragment extends BaseFragment {    // xUtils的view注解要求必须提供id，以使代码混淆不受影响。    @ViewInject(R.id.rb_group)    private RadioGroup rbGroup;    @ViewInject(R.id.vp_content)    private ViewPager vpContent;    private List<BasePager> basePagerList;    @Override    public View initView() {        View view = View.inflate(mActivity, R.layout.fragment_content, null);        ViewUtils.inject(this, view);//注入view和事件        return view;    }    @Override    public void initData() {        super.initData();        rbGroup.check(R.id.rb_home);//默认勾选主页        //初始化5个子页面        basePagerList = new ArrayList<>();//        for (int i=0;i<5;i++){//            BasePager basePager = new BasePager(mActivity);//            basePagerList.add(basePager);//        }        basePagerList.add(new HomePager(mActivity));        basePagerList.add(new NewsCenterPager(mActivity));        basePagerList.add(new SmartServicePager(mActivity));        basePagerList.add(new GovaffairsPager(mActivity));        basePagerList.add(new SettingPager(mActivity));        vpContent.setAdapter(new ContentPageAdapter());        vpContent.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {            @Override            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {            }            @Override            public void onPageSelected(int position) {                basePagerList.get(position).initData();//获取当前被选中的页面，初始化该页面数据            }            @Override            public void onPageScrollStateChanged(int state) {            }        });        basePagerList.get(0).initData();//初始化首页数据        //监听RadioGroup的选择事件        rbGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {            @Override            public void onCheckedChanged(RadioGroup group, int checkedId) {                switch (checkedId) {                    case R.id.rb_home:                        vpContent.setCurrentItem(0, false);//同时去掉页面切换的动画                        break;                    case R.id.rb_news:                        vpContent.setCurrentItem(1, false);                        break;                    case R.id.rb_smart:                        vpContent.setCurrentItem(2, false);                        break;                    case R.id.rb_govaffairs:                        vpContent.setCurrentItem(3, false);                        break;                    case R.id.rb_setting:                        vpContent.setCurrentItem(4, false);                        break;                }            }        });    }    class ContentPageAdapter extends PagerAdapter{        @Override        public int getCount() {            return basePagerList.size();        }        @Override        public boolean isViewFromObject(View view, Object object) {            return view == object;        }        @Override        public Object instantiateItem(ViewGroup container, int position) {            BasePager basePager = basePagerList.get(position);            container.addView(basePager.rootView);//            basePager.initData();//初始化数据...不要放在此处加载数据，否则会预先加载下一个页面            return basePager.rootView;        }        @Override        public void destroyItem(ViewGroup container, int position, Object object) {           container.removeView((View)object);        }    }}

NoScrollViewPager.java

package com.xbmu.wisdombj.view;import android.content.Context;import android.support.v4.view.ViewPager;import android.util.AttributeSet;import android.view.MotionEvent;/** * 不能左右滑的ViewPager * Created by Administrator on 2016/2/5 0005. */public class NoScrollViewPager extends ViewPager{    public NoScrollViewPager(Context context) {        super(context);    }    public NoScrollViewPager(Context context, AttributeSet attrs) {        super(context, attrs);    }    /**     * 重写onTouchEvent事件，什么都不用做     * @param ev     * @return     */    @Override    public boolean onTouchEvent(MotionEvent ev) {        return false;    }}

这里只贴出了重要代码，和一些思路。

运行效果图：