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

androidUI布局仿猫扑界面_第1张图片

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>

更多相关文章

  1. [Tools]Android Studio代码提示功能--Ctrl+Alt+Space（空格键）
  2. 开发笔记---软键盘遮挡输入框和导航栏遮挡了内容的解决方案
  3. Android学习心得（14） －－－ Android代码混淆（2）
  4. 一网打尽__Android 开源代码合集（SwitchButton）
  5. DSBridge——一套H5代码就能同时与Android和iOS通信
  6. [原创]通过代码及流程图说明Google在Android上的Push机制的实现
  7. android TextView 结合SpannableString对部分内容设置颜色、字体
  8. Android Studio xml android标签突然没有代码提示问题的解决
  9. Android填坑之旅（第十七篇）MIX2 适配看这一篇就够了，只需一行代码

随机推荐

  1. 新手必会的静态站点生成器——Gridsome
  2. 后台用户列表数据展示（php）
  3. 如何学插画？学习插画教程
  4. 【知其然，知其所以然】配置中心 Apollo源
  5. 属性与方法重载 、命名空间与类自动加载
  6. 登录功能（php）
  7. 别再用 System.currentTimeMillis() 统计
  8. 脸怎么绘画？漫画脸部绘画基础技巧
  9. Android(安卓)Binder机制(使用)
  10. android listview 圆角的实现方案，模仿Iph