安卓TabHost+ViewPager+RadioGroup多功能模板整理

最新推荐文章于 2017-07-15 11:05:10 发布

黄枫_

最新推荐文章于 2017-07-15 11:05:10 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏：【Android学习】文章标签： android viewpager tabhost 安卓 radiobutton

本文链接：https://blog.youkuaiyun.com/scboyhj__/article/details/40025685

【Android学习】专栏收录该内容

36 篇文章

订阅专栏

本文介绍了一种使用TabHost、ViewPager及RadioGroup构建安卓应用底部导航栏的方法，并展示了如何实现在选定标签页内进行水平滑动切换不同页面的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

现在安卓比较流行的布局就是类似新闻客户端和手机QQ那种的底端可选择，上面的个别页面可以滑动选择。

在测试过程中发现用安卓自带的TabHost去构建，很难得到自定义的效果。

因此采用TabHost+ViewPager+RadioGroup去构建这个效果

首先要弄清楚各自的用途和功能

（1）TabHost

由于安卓自带的TabHost貌似在有些手机版本上只能固定在底端的位置，所以我们用GadioGroup去显示界面按钮，由于构建HabHost必须定义host、tabs、content几个内容，这样我们隐藏tabs，用GadioGroup代替显示。代码如下：

<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
   <span style="color:#ff0000;"> android:id="@android:id/tabhost" </span>
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.android_mode.MainActivity" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical" >

        <FrameLayout
            <span style="color:#ff0000;">android:id="@android:id/tabcontent"</span>
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1" >
        </FrameLayout>

        <TabWidget
            <span style="color:#ff0000;">android:id="@android:id/tabs"</span>
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            <span style="color:#000066;">android:visibility="gone"</span> >
        </TabWidget>

        <RadioGroup
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal" >

            <RadioButton
                android:id="@+id/b1"
                android:layout_width="wrap_content"
                android:layout_height="40dp"
                android:layout_weight="1"
                android:background="#00ABCD"
                android:button="@null"
                android:gravity="center"
                android:text="首页" />

            <View
                android:layout_width="2px"
                android:layout_height="fill_parent" />

            <RadioButton
                android:id="@+id/b2"
                android:layout_width="wrap_content"
                android:layout_height="40dp"
                android:layout_weight="1"
                android:background="#00ABCD"
                android:button="@null"
                android:gravity="center"
                android:text="设置" />
        </RadioGroup>
    </LinearLayout>

</TabHost>

对于主文件，由于在安卓3.0版本以下不支持TabActivity，因此我们考虑到兼容性，选用ActivityGroup。

其具体方法如下所示：

public class MyTabOwnAct extends ActivityGroup {

	RadioButton radioButton1;
	RadioButton radioButton2;
	TabHost tabHost;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		setContentView(R.layout.tabmain);
		tabHost = (TabHost) findViewById(android.R.id.tabhost);
		tabHost.setup();
		tabHost.setup(this.getLocalActivityManager());  //必须要又这个语句，如果继承TabActivity可不要
		tabHost.addTab(tabHost.newTabSpec("l1")
				.setContent(new Intent(this, Act1.class)).setIndicator("首页"));
		tabHost.addTab(tabHost.newTabSpec("l2")
				.setContent(new Intent(this, Act2.class)).setIndicator("设置"));
		radioButton1 = (RadioButton) findViewById(R.id.b1);
		radioButton2 = (RadioButton) findViewById(R.id.b2);
		radioButton1.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View arg0) {
				// TODO Auto-generated method stub
				tabHost.setCurrentTabByTag("l1");  //显示与隐藏的标记
			}
		});
		radioButton2.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View arg0) {
				// TODO Auto-generated method stub
				tabHost.setCurrentTabByTag("l2");
			}
		});
	}
}

到目前为止我们把底部的效果实现，即可以通过下面的按钮，改变上面的界面。

接下来我们选择上面其中的一个界面，用ViewPager实现滑动的效果。

界面布局文件如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="40dp"
            android:layout_weight="1"
            android:background="#FF0fab"
            android:gravity="center"
            android:text="页面一" />

        <View
            android:layout_width="2dp"
            android:layout_height="fill_parent" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="40dp"
            android:layout_weight="1"
            android:background="#da0ccb"
            android:gravity="center"
            android:text="页面二" />

        <View
            android:layout_width="2dp"
            android:layout_height="fill_parent" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="40dp"
            android:layout_weight="1"
            android:background="#eeffff"
            android:gravity="center"
            android:text="页面三" />
    </LinearLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >
    </android.support.v4.view.ViewPager>

</LinearLayout>

</pre><span style="font-size:18px">我们要准备三个界面的布局，这里我分别命名为p1.xml，p2.xml，p3.xml，然后我们在主文件中通过得到ViewPager后关联到适配器，即可得到滑动的效果。</span><pre name="code" class="java"><span style="font-family: Arial, Helvetica, sans-serif;">public class Act1 extends Activity {</span>

	ViewPager pager;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		setContentView(R.layout.pager);
		pager = (ViewPager) findViewById(R.id.pager);

		pager.setAdapter(new MyPagerAdapter());
	}

	class MyPagerAdapter extends PagerAdapter {
		List<View> list = new ArrayList<View>();

		public MyPagerAdapter() {
			// TODO Auto-generated constructor stub
			View view1 = LayoutInflater.from(getApplicationContext()).inflate(
					R.layout.p1, null);
			View view2 = LayoutInflater.from(getApplicationContext()).inflate(
					R.layout.p2, null);
			View view3 = LayoutInflater.from(getApplicationContext()).inflate(
					R.layout.p3, null);
			list.add(view1);
			list.add(view2);
			list.add(view3);

		}

		@Override
		public Object instantiateItem(ViewGroup container, int position) {
			// TODO Auto-generated method stub
			((ViewPager) container).addView(list.get(position));
			return list.get(position);
		}

		@Override
		public void destroyItem(ViewGroup container, int position, Object object) {
			// TODO Auto-generated method stub
			// super.destroyItem(container, position, object);
			((ViewPager) container).removeView(list.get(position));///(position);// (list.get(position));
		}

		@Override
		public int getCount() {
			// TODO Auto-generated method stub
			return list.size();
		}

		@Override
		public boolean isViewFromObject(View arg0, Object arg1) {
			// TODO Auto-generated method stub
			return arg0 == arg1;
		}

	}
}

效果显示图：