左滑菜单部分:
引导页进入到主界面后使用左滑菜单的话,界面分为左滑菜单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(); }