智慧北京：内容页面UI的实现

实现效果：

1、实现Content的布局

——content.xml——

<?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" >

    <android.support.v4.view.ViewPager
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <RadioGroup
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/bottom_tab_bg"
        android:orientation="horizontal" >

        <RadioButton
            android:id="@+id/content_home"
            style="@style/tap_style"
            android:drawableTop="@drawable/tab_home"
            android:text="@string/zhuye" />

        <RadioButton
            android:id="@+id/content_newscenter"
            style="@style/tap_style"
            android:drawableTop="@drawable/tab_newscenter"
            android:text="@string/news_center" />

        <RadioButton
            android:id="@+id/content_service"
            style="@style/tap_style"
            android:drawableTop="@drawable/tab_service"
            android:text="@string/intelligence_service" />

        <RadioButton
            android:id="@+id/content_govaffairs"
            style="@style/tap_style"
            android:drawableTop="@drawable/tab_govaffairs"
            android:text="@string/government_affairs" />

        <RadioButton
            android:id="@+id/content_set"
            style="@style/tap_style"
            android:drawableTop="@drawable/tab_set"
            android:text="@string/set" />
    </RadioGroup>

</LinearLayout>

2、设置样式style(因为此处的RadioButton具有以下相同的样式)

——style.xml——

 <style name="tap_style">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_weight">1</item>
        <item name="android:background">@android:color/transparent</item>
        <item name="android:button">@null</item>
        <item name="android:layout_gravity">center</item>
        <item name="android:gravity">center_horizontal</item>
        <item name="android:textColor">@color/tab_text</item>
    </style>

3、设置按下、选择、松开效果

a：图片方面(5个)

——tab_home.xml——

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">


    <!-- 按下 -->
    <item android:drawable="@drawable/home_press" android:state_pressed="true"/>
    <!-- 选中 -->
    <item android:drawable="@drawable/home_press" android:state_checked="true"/>
    <!-- 其他 -->
    <item android:drawable="@drawable/home"/>


</selector>

b:文字方面(1个)

——tab_text.xml——

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- 按下 -->
    <item android:state_pressed="true" android:color="@color/red"/>
    <!-- 选中 -->
    <item android:state_checked="true" android:color="@color/red"/>
    <!-- 其他 -->
    <item android:color="@color/white"/>

</selector>

4、修改主页面，将该content.xml显示出来
——ContentFragement.java——

package huaxa.it.zhihuidemo.fragment;

import huaxa.it.zhihuidemo.R;
import android.annotation.SuppressLint;
import android.view.Gravity;
import android.view.View;
import android.widget.TextView;

/**
 * @项目名： ZhiHuiDemo
 * @包名： huaxa.it.zhihuidemo.fragment
 * @类名： ContentFragment
 * @创建者： 黄夏莲
 * @创建时间： 2016年10月5日 ,下午11:31:04
 * 
 * @描述： 内容页面
 */
public class ContentFragment extends BaseFragment
{

	@Override
	protected View initView()
	{

		View view = View.inflate(mActivity, R.layout.content, null);
		return view;
	}
}