Android知识点九(ViewPager + Fragment 实现底部菜单栏)

最新推荐文章于 2022-12-21 22:28:06 发布
最新推荐文章于 2022-12-21 22:28:06 发布
阅读量1.2k 收藏 2
点赞数
分类专栏： android 文章标签： Android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lushan1990/article/details/40737227
版权

  1.common_title_layout.xml（头部）

<?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="@dimen/common_title_bar_height"
    android:background="#FA3E63" >

    <ImageButton
        android:id="@+id/left_ib"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:layout_marginLeft="10dp"
        android:background="@android:color/transparent"
        android:padding="5dp"
        android:src="@drawable/com_return" />

    <TextView
        android:id="@+id/middle_title_tv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:background="@android:color/transparent"
        android:ellipsize="end"
        android:gravity="center_horizontal"
        android:maxEms="10"
        android:padding="5dp"
        android:singleLine="true"
        android:text="测试1"
        android:textColor="#FFFF"
        android:textSize="@dimen/common_title_size"
        android:textStyle="bold" />

</RelativeLayout>
2.activity_main.xml(主页布局) 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white" >

    <include
        android:id="@+id/common_title_bar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/common_title_bar_height"
        android:layout_alignParentTop="true"
        layout="@layout/common_title_layout" />

    <LinearLayout
        android:id="@+id/bottom_guide_layout"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_alignParentBottom="true"
        android:baselineAligned="false"
        android:orientation="horizontal" >

        <!-- 测试1-->

        <LinearLayout
            android:id="@+id/heart_word_item"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical"
            android:padding="3dp" >

            <ImageView
                android:id="@+id/heart_word_iv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:src="@drawable/main_heart_word_selector" />

            <TextView
                android:id="@+id/heart_word_tv"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal"
                android:text="@string/heart_word"
                android:textColor="@drawable/main_guide_text_color_selector"
                android:textSize="@dimen/common_text_size" />
        </LinearLayout>
        <!-- 测试2-->

        <LinearLayout
            android:id="@+id/record_item"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical"
            android:padding="3dp" >

            <ImageView
                android:id="@+id/record_iv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:src="@drawable/main_recored_selector" />

            <TextView
                android:id="@+id/record_tv"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal"
                android:text="@string/record"
                android:textColor="@drawable/main_guide_text_color_selector"
                android:textSize="@dimen/common_text_size" />
        </LinearLayout>
       <!-- 测试3-->

        <LinearLayout
            android:id="@+id/paradise_item"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical"
            android:padding="3dp" >

            <ImageView
                android:id="@+id/paradise_iv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:src="@drawable/main_paradise_selector" />

            <TextView
                android:id="@+id/paradise_tv"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal"
                android:text="@string/paradise"
                android:textColor="@drawable/main_guide_text_color_selector"
                android:textSize="@dimen/common_text_size" />
        </LinearLayout>
       <!-- 测试4-->

        <LinearLayout
            android:id="@+id/discover_item"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical"
            android:padding="3dp" >

            <ImageView
                android:id="@+id/discover_iv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:src="@drawable/main_discover_selector" />

            <TextView
                android:id="@+id/discover_tv"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal"
                android:text="@string/discover"
                android:textColor="@drawable/main_guide_text_color_selector"
                android:textSize="@dimen/common_text_size" />
        </LinearLayout>
       <!-- 测试5-->

        <LinearLayout
            android:id="@+id/setting_item"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical"
            android:padding="3dp" >

            <ImageView
                android:id="@+id/setting_iv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:src="@drawable/main_setting_selector" />

            <TextView
                android:id="@+id/setting_tv"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal"
                android:text="@string/setting"
                android:textColor="@drawable/main_guide_text_color_selector"
                android:textSize="@dimen/common_text_size" />
        </LinearLayout>
    </LinearLayout>

    <View
        android:id="@+id/line"
        android:layout_width="match_parent"
        android:layout_height="1px"
        android:layout_above="@id/bottom_guide_layout"
        android:background="@color/record_line_color" />

    <android.support.v4.view.ViewPager
        android:id="@+id/content_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/line"
        android:layout_below="@id/common_title_bar"
        android:fadingEdge="none"
        android:overScrollMode="never" >
    </android.support.v4.view.ViewPager>

</RelativeLayout>
3.MainActivity.java(启动页面) 

public class MainActivity extends FragmentActivity {

	private View mHeartWordView, mRecordView, mParadiseView, mDiscoverView,mSettingView;
	private ImageView mHeartWordIV, mRecordIV, mParadiseIV, mDiscoverIV,mSettingIV;
	private TextView mTitleTV, mHeartWordTV, mRecordTV, mParadiseTV,mDiscoverTV, mSettingTV;

	private FragmentManager mFragmentManager;
	private HeartWordFragment mWordFragment;
	private DiscoverFragment mDiscoverFragment;
	private RecordFragment mRecordFragment;
	private SettingFragment mSettingFragment;
	private ParadiseFragment mParadiseFragment;

	private ArrayList<Fragment> mFragmentList;

	private ViewPager mainPager;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		initView();
	}

	private void initView() {
		BottomItemOnClickListener mClickListener = new BottomItemOnClickListener();

		mTitleTV = (TextView) findViewById(R.id.middle_title_tv);

		mHeartWordView = findViewById(R.id.heart_word_item);
		mHeartWordIV = (ImageView) findViewById(R.id.heart_word_iv);
		mHeartWordTV = (TextView) findViewById(R.id.heart_word_tv);
		mRecordView = findViewById(R.id.record_item);
		mRecordIV = (ImageView) findViewById(R.id.record_iv);
		mRecordTV = (TextView) findViewById(R.id.record_tv);
		mParadiseView = findViewById(R.id.paradise_item);
		mParadiseIV = (ImageView) findViewById(R.id.paradise_iv);
		mParadiseTV = (TextView) findViewById(R.id.paradise_tv);
		mDiscoverView = findViewById(R.id.discover_item);
		mDiscoverIV = (ImageView) findViewById(R.id.discover_iv);
		mDiscoverTV = (TextView) findViewById(R.id.discover_tv);
		mSettingView = findViewById(R.id.setting_item);
		mSettingIV = (ImageView) findViewById(R.id.setting_iv);
		mSettingTV = (TextView) findViewById(R.id.setting_tv);

		mHeartWordView.setOnClickListener(mClickListener);
		mRecordView.setOnClickListener(mClickListener);
		mParadiseView.setOnClickListener(mClickListener);
		mDiscoverView.setOnClickListener(mClickListener);
		mSettingView.setOnClickListener(mClickListener);

		mFragmentManager = getSupportFragmentManager();
		mWordFragment = new HeartWordFragment();
		mDiscoverFragment = new DiscoverFragment();
		mRecordFragment = new RecordFragment();
		mParadiseFragment = new ParadiseFragment();
		mSettingFragment = new SettingFragment();

		mFragmentList = new ArrayList<Fragment>();
		mFragmentList.add(mWordFragment);
		mFragmentList.add(mRecordFragment);
		mFragmentList.add(mParadiseFragment);
		mFragmentList.add(mDiscoverFragment);
		mFragmentList.add(mSettingFragment);
		mainPager = (ViewPager) findViewById(R.id.content_pager);
		mainPager.setAdapter(new MainPagerAdapter(mFragmentManager));
		// 初始化
		mainPager.setCurrentItem(0);
		updataBottomStatu(0);
		/**
		 * 若禁止ViewPager滑动可以自定义ViewPager重写scrollTo方法
		 */
		mainPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
			@Override
			public void onPageSelected(int position) {
				updataBottomStatu(position);
			}

			@Override
			public void onPageScrolled(int arg0, float arg1, int arg2) {

			}

			@Override
			public void onPageScrollStateChanged(int arg0) {

			}
		});
	}

	protected class BottomItemOnClickListener implements OnClickListener {
		@Override
		public void onClick(View v) {
			switch (v.getId()) {
			case R.id.heart_word_item: {
				mainPager.setCurrentItem(0);
				updataBottomStatu(0);
			}
				break;
			case R.id.record_item: {
				mainPager.setCurrentItem(1);
				updataBottomStatu(1);
			}
				break;
			case R.id.paradise_item: {
				mainPager.setCurrentItem(2);
				updataBottomStatu(2);
			}
				break;
			case R.id.discover_item: {
				mainPager.setCurrentItem(3);
				updataBottomStatu(3);
			}
				break;
			case R.id.setting_item: {
				mainPager.setCurrentItem(4);
				updataBottomStatu(4);
			}
				break;
			}
		}
	}

	private void setHeartWord(boolean isSelect) {
		mHeartWordView.setSelected(isSelect);
		mHeartWordIV.setSelected(isSelect);
		mHeartWordTV.setSelected(isSelect);
	}

	private void setRecord(boolean isSelect) {
		mRecordView.setSelected(isSelect);
		mRecordIV.setSelected(isSelect);
		mRecordTV.setSelected(isSelect);
	}

	private void setParadise(boolean isSelect) {
		mParadiseView.setSelected(isSelect);
		mParadiseIV.setSelected(isSelect);
		mParadiseTV.setSelected(isSelect);
	}

	private void setDiscover(boolean isSelect) {
		mDiscoverView.setSelected(isSelect);
		mDiscoverIV.setSelected(isSelect);
		mDiscoverTV.setSelected(isSelect);
	}

	private void setSetting(boolean isSelect) {
		mSettingView.setSelected(isSelect);
		mSettingIV.setSelected(isSelect);
		mSettingTV.setSelected(isSelect);
	}

	private void updataBottomStatu(int index) {
		switch (index) {
		case 0:
			if (!mHeartWordView.isSelected()) {
				setTitle(R.string.angle_word);
				setHeartWord(true);
				setRecord(false);
				setParadise(false);
				setDiscover(false);
				setSetting(false);
			}
			break;
		case 1:
			if (!mRecordView.isSelected()) {
				setTitle(R.string.record);
				setHeartWord(false);
				setRecord(true);
				setParadise(false);
				setDiscover(false);
				setSetting(false);
			}
			break;
		case 2:
			if (!mParadiseView.isSelected()) {
				setTitle(R.string.paradise);
				setHeartWord(false);
				setRecord(false);
				setParadise(true);
				setDiscover(false);
				setSetting(false);
			}
			break;
		case 3:
			if (!mDiscoverView.isSelected()) {
				setTitle(R.string.discover);
				setHeartWord(false);
				setRecord(false);
				setParadise(false);
				setDiscover(true);
				setSetting(false);
			}
			break;
		case 4:
			if (!mSettingView.isSelected()) {
				setTitle(R.string.setting);
				setHeartWord(false);
				setRecord(false);
				setParadise(false);
				setDiscover(false);
				setSetting(true);
			}
			break;
		}
	}

	class MainPagerAdapter extends FragmentStatePagerAdapter {

		public MainPagerAdapter(FragmentManager fm) {
			super(fm);
		}

		@Override
		public Fragment getItem(int arg0) {
			return mFragmentList.get(arg0);
		}

		@Override
		public int getCount() {
			return mFragmentList == null ? 0 : mFragmentList.size();
		}

		@Override
		public void destroyItem(ViewGroup container, int position, Object object) {

		}

	}

	public void setTitle(CharSequence title) {
		mTitleTV.setText(title);
	}

	public void setTitle(int resId) {
		mTitleTV.setText(getString(resId));
	}
}

4.HeartWordFragment.java(子界面) 

public class HeartWordFragment extends Fragment {
	private View rootView;
	private TextView mytxt;

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		rootView = inflater.inflate(R.layout.heart_word_layout, null);
		initViews();
		return rootView;
	}

	private void initViews() {
		MainActivity mainActivity = (MainActivity) getActivity();
		mainActivity.setTitle("测试2");
		mytxt = (TextView) rootView.findViewById(R.id.mytxt);
		mytxt.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View arg0) {
				Toast.makeText(getActivity(), "点击了文本", Toast.LENGTH_LONG)
						.show();
			}
		});
	}
}

5.最后在给个drawable(main_heart_word_selector.xml) 

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/heart_select" android:state_selected="true"></item>
    <item android:drawable="@drawable/heart_normal"></item>
</selector>

6.效果


happy_to_you
关注
专栏目录
android让控件在最底部,Android中设置控件显示在屏幕底部
weixin_33428613的博客
05-30 3658
文件来源：http://www.cnblogs.com/zdz8207/archive/2012/12/13/2816906.htmlandroid 让一个控件按钮居于底部的几种方法1.采用linearlayout布局：android:layout_height="0dp" android:layout_weight="1" 2. 采用relativelayout布局：android:layout...
android基础---ViewPager与fragment
lilingmei000的博客
04-14 426
在日常开发中，ViewPager和Fragment随处可见，例如微信的主界面可以用它们来实现。 分析一下微信主界面：头部是一个TextView。底部是一个选项卡。重点就在中间部分。我们今天也主要学习中间部分的实现。 以下将会用类似于微信的一个App布局来举例 （一） 首先我们先建立两个布局文件：top.xml和bottom.xml分别实现顶部是底部    (top.xml为一个Te
Android CoordinatorLayout进阶教程-TabLayout+ViewPage+Fragment实例
最新发布
aaaym的博客
12-21 648
注意TabLayout是需要写在AppBarLayout中的，至于为什么可以参考前面的基础教程中关于AppBarLayout子视图悬停的原理，同时我们这里用了ViewPager2作为Fragment视图的滑动切换，配合TabLayout组件一起使用，最重要的要注意ViewPager2需要添加一个behavior，依赖的组件是AppBarLayout，下面我们再来看看Activity中的代码实现。关于viewPager2以及TabLayout联合使用不清楚的可以百度一下相关教程。
CoordinatorLayout标题栏置顶,底部操作栏固定
choose_xt的博客
03-08 1710
一般的CoordinatorLayout布局可能是在AppBarLayout内进行向上滑动折叠，这种情况直接按照官方文档来即可。但有时候的需求可能不止如此，页面的底部可能有一排功能按钮，需固定。此时利用include可以达到。 1.第一个布局，顶部固定标题栏，底部固定操作栏。中间include我们需要的折叠布局 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.an
android新特性，CoordinatorLayout,TabLayout+viewpager+fragment,RapidFloatingActionLayout详解
李炎的博客
03-09 2895
一.CoordinatorLayout 作为Android的控件, CoordinatorLayout已经加入最新的HelloWorld项目中, 也是Material风格的重要组件, 协调(Coordinate)其他组件, 实现联动. 那么让我们来看看这个动画效果怎么用吧? <?xml version="1.0" encoding="utf-8"?> <android...
通过Fragment实现简单的上下文菜单
学习记录
12-22 2573
用到fragment的菜单功能，昨天测试了下，怎么都不出菜单，仔细看了下文档，发现一个问题，fragment的菜单在使用前，一定要在onCreate（）中调用setHasOptionsMenu（）这个方法。这个文档中已经明确标注了，大家可以去看下。 http://www.eoeandroid.com/forum.php?mod=viewthread&tid=69175 【转】Fra
Android UI基础——ViewPager+Fragment
Changemain
04-26 496
ViewPagerViewPager是一个允许用户左右滑动翻页显示数据的控件，想要在界面显示数据就需要使用PagerAdapter去加载数据了，这边的数据先设置为几张图片，让其滑动显示，具体代码如下： 布局中的代码（ViewPager是Android的支持包supportv4包中的控件，必须写全称 ）：<RelativeLayout xmlns:android="http://schem
Android 用 TabLayout + ViewPager + Fragment 实现顶部、底部导航栏
QDJdeveloper
05-06 6135
这是我们 Material Design 系列的第四篇分享了，对 Material Design 还不是太清楚的可以先过前几篇大概的了解一下，今天我们主要通过实现顶部和底部导航栏的功能来了解又一个 Material Design 的控件 TabLayout 的使用，在移动应用开发中，由于屏膜大小的限制，使得顶部、底部 Tab 导航栏的使用非常的广泛，相信大家在实际开发过程中也是经常遇到，以前可以通
Android ViewPager+Fragment超高仿微信主界面
12-22
在实现底部导航栏时，通常会使用RadioGroup来显示菜单选项。每个RadioButton代表一个菜单项，当用户点击其中一个时，RadioGroup会自动取消其他按钮的选中状态。通过监听`OnCheckedChangeListener`，我们可以捕获用户...
仿微信5.2界面（ActionBar+ViewPager+Fragment）
03-11
这个标题所涉及的知识点主要涵盖三个方面：ActionBar、ViewPager和Fragment，这些都是Android SDK中的核心组件，对于创建高效且用户体验良好的应用程序至关重要。 首先，ActionBar是Android系统提供的一个顶部导航...
ViewPager+fragment实现tab导航界面
07-16
在Android应用开发中，`ViewPager` 和 `Fragment` 结合使用是创建滑动Tab导航界面的常见方法。这种设计模式可以提供高效的用户交互，让用户在不同的内容区域之间平滑切换，而无需每次都加载整个新页面。`ViewPager` ...
android仿微信6.0底部滑动菜单栏+导航栏,ViewPager+RadioGroup+ActionBar
11-20
在Android应用开发中，创建一个类似微信6.0版本的底部滑动菜单栏与导航栏是一种常见的需求。这个项目利用了ViewPager、RadioGroup和ActionBar等组件来实现这一功能。下面将详细讲解这些知识点。 首先，`ViewPager`...
多个Fragment的Activity中上下文菜单的处理(ContextMenu)
sanjiaozhen的专栏
12-29 544
在有多个Fragment的Activity中使用上下文菜单时会出现上下文菜单所执行的命令与被执行的对象不一致的问题。比如：在Fragment（或ListFragment）中含有ListView，你給ListView对象注册了上下文菜单。样例代码： [java] view plaincopy ListView mListView = (ListVi
android上传图片与显示
lushan123456的专栏
09-10 1678
android上传图片然后在加载出来显示。    网上看了看,大部分用的是以流的方式post过去。   首先android端：(只贴出关键性代码)   以下是装载ImageView显示图片并且得到装载后的图片的路径picPath@Override protected void onActivityResult(int requestCode, int resultCode, Intent
Android知识点四：侧栏滑动效果
lushan123456的专栏
03-04 1644
首先准备工作：mframework.jar包(SlidingMenu)     MainActivity.java     private SlidingMenu menu; private MianAdapter mainAdapter; @Override protected void onCreate(Bundle savedInstanceState) { super.on
Android知识点四：头部滑动菜单
lushan123456的专栏
03-04 1331
首先：布局     <HorizontalScrollView android:id="@+id/hscrollview" android:layout_width="fill_parent" android:layout_height="35dp" android:layout_marginTop="-3dp" a
Android知识点八(sqllite数据库操作，以及sqlite+handler+XListView实现上拉刷新下拉加载)
lushan123456的专栏
11-01 1305
1.DBHelper类数据库辅助类:
Android知识点六:自定义分享菜单
lushan123456的专栏
03-12 1236
首先布局：activity_main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientat
Android: 实现底部菜单栏滑动切换用ViewPager+Fragment+RadioButton
本文档主要介绍了如何在Android开发中使用ViewPager、Fragment和RadioButton来实现底部菜单栏的滑动切换功能。ViewPager是一个强大的页面切换组件，用于展示多个视图，用户可以通过左右滑动切换不同内容。它与...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值