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

Posted 2020-09-14 wzjhoutai

如今安卓比較流行的布局就是类似新闻client和手机QQ那种的底端可选择，上面的个别页面能够滑动选择。

在測试过程中发现用安卓自带的TabHost去构建。非常难得到自己定义的效果。

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

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

（1）TabHost

   因为安卓自带的TabHost貌似在有些手机版本号上仅仅能固定在底端的位置，所以我们用GadioGroup去显示界面button，因为构建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");
			}
		});
	}
}

到眼下为止我们把底部的效果实现，即能够通过以下的button，改变上面的界面。

接下来我们选择上面当中的一个界面，用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;
		}

	}
}

效果显示图：