androidUI布局仿猫扑界面

这篇文章主要说的是android中的UI设定。程序只有最基本的模版，没有任何内容。

1：首先我们先实现顶部，代码如下：

<FrameLayout

        xmlns:android="http://schemas.android.com/apk/res/android"

        android:id="@+id/main_tab_banner"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:background="@drawable/bg_title"

        android:paddingLeft="10dip"

        android:paddingRight="10dip">

        <TextView

            android:id="@+id/textView1"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_gravity="left|center_vertical"

            android:padding="8dip"

            android:text="返回"/>

        <TextView

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_gravity="center"

            android:text="标题内容"

            android:textColor="#000000"

            android:textSize="18dip"/>

        <TextView

            android:id="@+id/textView1"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_gravity="right|center_vertical"

            android:padding="8dip"

            android:text="前进"/>

    </FrameLayout>

这里的TextView可以用一张图片或者一个按钮代替，看个人需要。

2：实现底部。底部采用TabHost，代码如下：

<LinearLayout

        android:id="@+id/main_tab"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:layout_alignParentBottom="true"

        android:background="@drawable/bg_foot"

        android:gravity="center"

        android:orientation="horizontal">

        <TabHost

            xmlns:android="http://schemas.android.com/apk/res/android"

            android:id="@+id/main_tab2"

            android:layout_width="fill_parent"

            android:layout_height="fill_parent">

            <LinearLayout

                android:layout_width="fill_parent"

                android:layout_height="fill_parent"

                android:orientation="vertical">

                <FrameLayout

                    android:id="@android:id/tabcontent"

                    android:layout_width="fill_parent"

                    android:layout_height="0.0dip"

                    android:layout_weight="1.0"/>

                <TabWidget

                    android:id="@android:id/tabs"

                    android:layout_width="fill_parent"

                    android:layout_height="wrap_content"

                    android:layout_weight="0.0"

                    android:visibility="gone"/>

                <RadioGroup

                    android:layout_width="fill_parent"

                    android:layout_height="wrap_content"

                    android:layout_gravity="bottom"

                    android:background="@drawable/bg_footbar"

                    android:gravity="center_vertical"

                    android:orientation="horizontal">

                    <RadioButton

                        android:id="@+id/radio_button1"

                        style="@style/tab_style"

                        android:layout_marginTop="2.0dip"

                        android:drawableTop="@drawable/ico_zy01"

                        android:text="主页"/>

                    <RadioButton

                        android:id="@+id/radio_button2"

                        style="@style/tab_style"

                        android:layout_marginTop="2.0dip"

                        android:drawableTop="@drawable/ico_dp01"

                        android:text="地盘"/>

                    <RadioButton

                        android:id="@+id/radio_button3"

                        style="@style/tab_style"

                        android:layout_marginTop="2.0dip"

                        android:drawableTop="@drawable/ico_tt01"

                        android:text="贴帖"/>

                    <RadioButton

                        android:id="@+id/radio_button4"

                        style="@style/tab_style"

                        android:layout_marginTop="2.0dip"

                        android:drawableTop="@drawable/ico_gd01"

                        android:text="更多"/>

                </RadioGroup>

            </LinearLayout>

        </TabHost>

    </LinearLayout>

底部有很多做法，这里只是纯模版。

3：把顶部和底部加起来。

<LinearLayout

        android:id="@+id/main_tab_container"

        android:layout_width="fill_parent"

        android:layout_height="fill_parent"

        android:layout_above="@id/main_tab"

        android:layout_below="@id/main_tab_banner"

        android:background="#FFFFE0">

        <TextView

            android:id="@+id/textView1"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:padding="30dip"

            android:text="中间内容"/>

    </LinearLayout>

最后我们的整体代码就出来了。

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:orientation="vertical">

    <FrameLayout

        xmlns:android="http://schemas.android.com/apk/res/android"

        android:id="@+id/main_tab_banner"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:background="@drawable/bg_title"

        android:paddingLeft="10dip"

        android:paddingRight="10dip">

        <TextView

            android:id="@+id/textView1"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_gravity="left|center_vertical"

            android:padding="8dip"

            android:text="返回"/>

        <TextView

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_gravity="center"

            android:text="标题内容"

            android:textColor="#000000"

            android:textSize="18dip"/>

        <TextView

            android:id="@+id/textView1"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_gravity="right|center_vertical"

            android:padding="8dip"

            android:text="前进"/>

    </FrameLayout>

    <LinearLayout

        android:id="@+id/main_tab"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:layout_alignParentBottom="true"

        android:background="@drawable/bg_foot"

        android:gravity="center"

        android:orientation="horizontal">

        <TabHost

            xmlns:android="http://schemas.android.com/apk/res/android"

            android:id="@+id/main_tab2"

            android:layout_width="fill_parent"

            android:layout_height="fill_parent">

            <LinearLayout

                android:layout_width="fill_parent"

                android:layout_height="fill_parent"

                android:orientation="vertical">

                <FrameLayout

                    android:id="@android:id/tabcontent"

                    android:layout_width="fill_parent"

                    android:layout_height="0.0dip"

                    android:layout_weight="1.0"/>

                <TabWidget

                    android:id="@android:id/tabs"

                    android:layout_width="fill_parent"

                    android:layout_height="wrap_content"

                    android:layout_weight="0.0"

                    android:visibility="gone"/>

                <RadioGroup

                    android:layout_width="fill_parent"

                    android:layout_height="wrap_content"

                    android:layout_gravity="bottom"

                    android:background="@drawable/bg_footbar"

                    android:gravity="center_vertical"

                    android:orientation="horizontal">

                    <RadioButton

                        android:id="@+id/radio_button1"

                        style="@style/tab_style"

                        android:layout_marginTop="2.0dip"

                        android:drawableTop="@drawable/ico_zy01"

                        android:text="主页"/>

                    <RadioButton

                        android:id="@+id/radio_button2"

                        style="@style/tab_style"

                        android:layout_marginTop="2.0dip"

                        android:drawableTop="@drawable/ico_dp01"

                        android:text="地盘"/>

                    <RadioButton

                        android:id="@+id/radio_button3"

                        style="@style/tab_style"

                        android:layout_marginTop="2.0dip"

                        android:drawableTop="@drawable/ico_tt01"

                        android:text="贴帖"/>

                    <RadioButton

                        android:id="@+id/radio_button4"

                        style="@style/tab_style"

                        android:layout_marginTop="2.0dip"

                        android:drawableTop="@drawable/ico_gd01"

                        android:text="更多"/>

                </RadioGroup>

            </LinearLayout>

        </TabHost>

    </LinearLayout>

    <LinearLayout

        android:id="@+id/main_tab_container"

        android:layout_width="fill_parent"

        android:layout_height="fill_parent"

        android:layout_above="@id/main_tab"

        android:layout_below="@id/main_tab_banner"

        android:background="#FFFFE0">

        <TextView

            android:id="@+id/textView1"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:padding="30dip"

            android:text="中间内容"/>

    </LinearLayout>

</RelativeLayout>

styles.xml文件代码

<?xml version="1.0" encoding="UTF-8"?>

<resources>

 

    <style name="tab_style">

        <item name="android:textSize">9.0dip</item>

        <item name="android:ellipsize">middle</item>

        <item name="android:gravity">center</item>

        <item name="android:background">@drawable/radio_bg</item>

        <item name="android:layout_width">fill_parent</item>

        <item name="android:layout_height">wrap_content</item>

        <item name="android:layout_margin">2.0dip</item>

        <item name="android:button">@null</item>

        <item name="android:singleLine">true</item>

        <item name="android:layout_weight">1.0</item>

    </style>

 

</resources>

radio_bg.xml代码

<?xml version="1.0" encoding="UTF-8"?>

<selector

  xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_focused="true" android:state_enabled="true" android:drawable="@drawable/home_btn_bg_s"/>

    <item android:state_enabled="true" android:state_pressed="true" android:drawable="@drawable/home_btn_bg_s"/>

    <item android:state_enabled="true" android:state_checked="true" android:drawable="@drawable/home_btn_bg_d"/>

  

</selector>