androidUI布局仿猫扑界面

来源：互联网发布：工程进度编制软件编辑：程序博客网时间：2024/05/11 19:56

这篇文章主要说的是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"?>

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

</style>

</resources>

radio_bg.xml代码

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

<selector

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

</selector>