智慧珠海的主界面左滑菜单及ViewPager和RadioButton的使用

左滑菜单部分:

引导页进入到主界面后使用左滑菜单的话,界面分为左滑菜单Fragment和主界面Fragment。

左滑菜单:SlidingMenu。用的话需要在AndroidStudio中File --> new --> Import  Module。导入SlidingMenu的开源库library。再点File --> project structure在app的dependencies中添加ModuleDependency将library添加到项目中。需要将library的module.gradle中的android{}里面的内容修改成与项目中module.gradle中的android{}一致。

在要使用左滑菜单的Activity中因为要使用SlidingMenu主界面又要使用Fragment所以将该Activity继承SlidingFragmentActivity。(不推荐该方式,因为不能正确识别屏幕大小)

//        setBehindContentView(R.layout.left_menu); 设置左滑菜单的布局文件
//        SlidingMenu slidingMenu = getSlidingMenu();	
//        slidingMenu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN); 设置滑动为全屏可触发不必在左边缘滑动
//        slidingMenu.setBehindOffset(400); //设置菜单滑出后屏幕需留多少像素

调用以上代码即可实现左滑菜单。(将左滑菜单的布局设置为空FrameLayout设置个id,用fragment将布局替换)。

实现左滑菜单正确方式:

Activity不需继承SlidingFragmentActivity。还是原来那样继承FragmentActivity即可。下面是实现左滑菜单的代码:

SlidingMenu slidingMenu = new SlidingMenu(this);
slidingMenu.attachToActivity(this, SlidingMenu.SLIDING_CONTENT);
slidingMenu.setMenu(R.layout.left_menu);
slidingMenu.setMode(SlidingMenu.LEFT);
slidingMenu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);
slidingMenu.setBehindOffset(400);


需要用到Fragment。在项目中创建一个BaseFragment让往后的fragment继承该fragment。

public abstract class BaseFragment extends Fragment {
    public Activity mActivity;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        mActivity = getActivity();
        super.onCreate(savedInstanceState);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = init_view();
        return view;
    }

    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        init_data();
        super.onActivityCreated(savedInstanceState);
    }

    public abstract View init_view();
    public void init_data(){};
}
该BaseFragment先获取fragment所在的activity对象,及书写抽象方法让子fragment初始化布局和初始化数据。


主界面ViewPager和底下栏与微信类似的几个按钮实现:

将主界面的布局文件根布局为FrameLayout,设置Id。空布局被Fragment替换都是用FrameLayout。主界面的Fragment布局为自定义的ViewPager设置为不可左右滑动加上底部的RadioGroup中放置RadioButton。

public class NoScrollViewPager extends ViewPager {
    public NoScrollViewPager(Context context) {
        super(context);
    }

    public NoScrollViewPager(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        return true;
    }
}
自定义的ViewPager需要实现两个构造函数及实现onTouchEvent方法将返回值修改为true即可,这样就不会执行ViewPager原来的滑动事件。

主界面Fragment的布局如下:

<?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">
    <com.example.seven.intelligencezh.activity.view.NoScrollViewPager
        android:id="@+id/main_vp"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

    </com.example.seven.intelligencezh.activity.view.NoScrollViewPager>
    <RadioGroup
        android:id="@+id/main_rg"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/bottom_tab_bg"
        android:orientation="horizontal"
        android:gravity="center">
        <RadioButton
            android:id="@+id/main_rb_home"
            android:text="首页"
            android:drawableTop="@drawable/btn_selector_home"
            style="@style/main_bottom_tab"
            android:checked="true"
            />
        <RadioButton
            android:id="@+id/main_rb_news"
            android:text="新闻中心"
            android:drawableTop="@drawable/btn_selector_newscenter"
            style="@style/main_bottom_tab"
            />
        <RadioButton
            android:id="@+id/main_rb_service"
            android:text="智慧服务"
            android:drawableTop="@drawable/btn_selector_smartservice"
            style="@style/main_bottom_tab"
            />
        <RadioButton
            android:id="@+id/main_rb_affairs"
            android:text="政务"
            android:drawableTop="@drawable/btn_selector_govaffairs"
            style="@style/main_bottom_tab"
            />
        <RadioButton
            android:id="@+id/main_rb_setting"
            android:text="设置"
            android:drawableTop="@drawable/btn_selector_setting"
            style="@style/main_bottom_tab"
            />
    </RadioGroup>

</LinearLayout>
RadioButton的style如下:

<style name="main_bottom_tab">
    <item name="android:layout_width">0dp</item>
    <item name="android:layout_weight">1</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:button">@null</item>
    <item name="android:gravity">center</item>
    <item name="android:padding">5dp</item>
    <item name="android:drawablePadding">5dp</item>
    <item name="android:background">@android:color/transparent</item>
    <item name="android:textColor">@color/txt_selector_bottom_tab</item>
</style>
将背景background设置为透明。防止在有些手机会有不同的背景。


接下来ViewPager的实现:

滑动的页面标题是一样的,所以布局又可以拆分为标题栏及一个空布局。主界面已经是Fragment了,ViewPager里就不能用Fragment了,而是用普通的类在将布局转化为View来显示。所以创建一个BasePager,将ViewPager几页中共有部分View设置在BasePager中并初始化一些数据。

以下是BasePager中的布局:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent"
    android:orientation="vertical">
    <include layout="@layout/title_bar" />
    <FrameLayout
        android:id="@+id/main_base_pager_fl"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

    </FrameLayout>
</LinearLayout>

include中title_bar的布局如下:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="wrap_content">
    <TextView
        android:id="@+id/title_bar_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/title_red_bg"
        android:text="标题"
        android:textColor="#fff"
        android:textSize="40sp"
        android:gravity="center"/>

</RelativeLayout>
以下是BasePager的代码:

public abstract class BasePager {
    public Activity mActivity;
    public TextView mTitle;
    public FrameLayout fl;
    public View view;
    public BasePager(Activity activity){
        mActivity = activity;
        init_view();
    }
    public void init_view(){
        view = View.inflate(mActivity, R.layout.main_base_pager, null);
        mTitle = (TextView) view.findViewById(R.id.title_bar_tv);
        fl = (FrameLayout) view.findViewById(R.id.main_base_pager_fl);

    }
    public abstract void init_data();
}
同样获取Activity对象,以及获取标题栏中的控件以便子Pager可以设置为不一样的标题和图片等。并定义一个抽象方法让子Pager初始化数据。


接下来则是让创建几个子Pager来继承BasePager。

public class HomePager extends BasePager {

    public HomePager(Activity activity) {
        super(activity);
    }

    @Override
    public void init_data() {
        mTitle.setText("智慧珠海");

        TextView tv = new TextView(mActivity);
        tv.setText("首页_李学文");
        tv.setTextColor(Color.RED);
        tv.setTextSize(30);
        tv.setGravity(Gravity.CENTER);

        fl.addView(tv);
    }
}
然后在主界面的Fragment中找到ViewPager控件,创建适配器设置给ViewPager。

数据源则是几个子Pager。

public class MainFragment extends BaseFragment {
    private NoScrollViewPager vp;
    private ArrayList<BasePager> mPagers;

    @Override
    public View init_view() {
        View view = View.inflate(mActivity, R.layout.fragment_main, null);
        vp = (NoScrollViewPager) view.findViewById(R.id.main_vp);
        RadioGroup rg = (RadioGroup) view.findViewById(R.id.main_rg);
        rg.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                switch (checkedId){
                    case R.id.main_rb_home:
                        vp.setCurrentItem(0, false);
                        break;
                    case R.id.main_rb_news:
                        vp.setCurrentItem(1, false);
                        break;
                    case R.id.main_rb_service:
                        vp.setCurrentItem(2, false);
                        break;
                    case R.id.main_rb_affairs:
                        vp.setCurrentItem(3, false);
                        break;
                    case R.id.main_rb_setting:
                        vp.setCurrentItem(4, false);
                        break;
                }
            }
        });

        mPagers = new ArrayList<>();
        mPagers.add(new HomePager(mActivity));
        mPagers.add(new NewsPager(mActivity));
        mPagers.add(new ServicePager(mActivity));
        mPagers.add(new AffairsPager(mActivity));
        mPagers.add(new SettingPager(mActivity));

        vp.setAdapter(new MyViewPagerAdapter());
        vp.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                mPagers.get(position).init_data();
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
        mPagers.get(0).init_data();

        return view;
    }

    class MyViewPagerAdapter extends PagerAdapter{

        @Override
        public int getCount() {
            return mPagers.size();
        }

        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            BasePager pager = mPagers.get(position);
            container.addView(pager.view);
//            pager.init_data();

            return pager.view;
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView((View) object);
        }
    }
}
其中为了优化ViewPager防止其展示第一页时加载了第二页,所以不在instantiateItem中初始化数据,而是将ViewPager设置addOnPageChangeListener监听,当页面变化时才初始化数据,不过需要手动先展示第一页的数据。因为ViewPager不可滑动,而且下面的RadioButton点击时需要跳转到响应的ViewPager页面,所以设置RadioGroup的onCheckedChangeListener监听,当点击到相应的RadioButton时将ViewPager也设置到相应的页面。


最后在主界面Activity中将Fragment替换FrameLayout空布局。

private void init_fragment(){
        FragmentManager fragmentManager = getSupportFragmentManager();
        FragmentTransaction transaction = fragmentManager.beginTransaction();
        transaction.replace(R.id.main_fl, new MainFragment(), MAIN_FRAGMENT_TAG);
//        transaction.replace(R.id.fl_left_menu, new LeftMenuFragment(), LEFT_MENU_FRAGMENT_TAG);
        transaction.commit();
    }






  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值