[英]How to make custom “button” like Facebook for Android
我想為Android應用程序(例如Facebook for Android)制作主屏幕。 有誰知道如何進行這種布局? 我仍然是Android開發的新手。
您可以制作一個3x3的表格,每行放置3個按鈕,並以背景圖片作為按鈕:
<?xml version="1.0" encoding="utf-8"?>
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/tableLayout1"
android:layout_height="match_parent"
android:layout_width="wrap_content">
<TableRow
android:id="@+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:text="Button"
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/icon1"></Button>
<Button
android:text="Button"
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/icon2"></Button>
<Button
android:text="Button"
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/icon3"></Button>
</TableRow>
<TableRow
android:id="@+id/tableRow2"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:text="Button"
android:id="@+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/icon4"></Button>
<Button
android:text="Button"
android:id="@+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/icon5"></Button>
<Button
android:text="Button"
android:id="@+id/button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/icon6"></Button>
</TableRow>
<TableRow
android:id="@+id/tableRow3"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:text="Button"
android:id="@+id/button7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/icon7"></Button>
<Button
android:text="Button"
android:id="@+id/button8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/icon8"></Button>
<Button
android:text="Button"
android:id="@+id/button9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/icon9"></Button>
</TableRow>
將@ drawable / iconX更改為所需/所需的任何背景圖像。
使用三個具有水平方向的線性布局,並使它們的父布局具有垂直方向,如下所示:
<?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:baselineAligned="false" android:orientation="horizontal">
<LinearLayout android:gravity="center" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:orientation="vertical" android:layout_gravity="center_vertical" android:layout_weight="1">
<LinearLayout android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_gravity="center" >
<LinearLayout android:layout_height="wrap_content" android:layout_width="wrap_content"
android:orientation="vertical">
<ImageView android:background="@drawable/icon"
android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="left"/>
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="caption"/>
</LinearLayout>
<LinearLayout android:layout_height="wrap_content" android:layout_width="wrap_content"
android:orientation="vertical" android:layout_marginLeft="20dip">
<ImageView android:background="@drawable/icon"
android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="left"/>
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="caption"/>
</LinearLayout>
<LinearLayout android:layout_height="wrap_content" android:layout_width="wrap_content"
android:orientation="vertical" android:layout_marginLeft="20dip">
<ImageView android:background="@drawable/icon"
android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="left"/>
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="caption"/>
</LinearLayout>
</LinearLayout>
<LinearLayout android:baselineAligned="false" android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_gravity="center" >
<LinearLayout android:layout_height="wrap_content" android:layout_width="wrap_content"
android:orientation="vertical">
<ImageView android:background="@drawable/icon"
android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="left"/>
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="caption"/>
</LinearLayout>
<LinearLayout android:layout_height="wrap_content" android:layout_width="wrap_content"
android:orientation="vertical" android:layout_marginLeft="20dip">
<ImageView android:background="@drawable/icon"
android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="left"/>
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="caption"/>
</LinearLayout>
<LinearLayout android:layout_height="wrap_content" android:layout_width="wrap_content"
android:orientation="vertical" android:layout_marginLeft="20dip">
<ImageView android:background="@drawable/icon"
android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="left"/>
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="caption"/>
</LinearLayout>
</LinearLayout>
<LinearLayout android:baselineAligned="false" android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_gravity="center" >
<LinearLayout android:layout_height="wrap_content" android:layout_width="wrap_content"
android:orientation="vertical">
<ImageView android:background="@drawable/icon"
android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="left"/>
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="caption"/>
</LinearLayout>
<LinearLayout android:layout_height="wrap_content" android:layout_width="wrap_content"
android:orientation="vertical" android:layout_marginLeft="20dip">
<ImageView android:background="@drawable/icon"
android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="left"/>
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="caption"/>
</LinearLayout>
<LinearLayout android:layout_height="wrap_content" android:layout_width="wrap_content"
android:orientation="vertical" android:layout_marginLeft="20dip">
<ImageView android:background="@drawable/icon"
android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="left"/>
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="caption"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
看起來像這樣:
這是代碼: home_icon_view.xml
<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout android:orientation="vertical" android:focusable="true" android:layout_width="90.0dip" android:layout_height="70.0dip" android:layout_margin="5.0dip" xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout android:gravity="center" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1.0">
<ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:scaleType="center" />
</LinearLayout>
<TextView android:textSize="14.0sp" android:textColor="@color/home_text_color" android:gravity="center_horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content" />
</LinearLayout>
還有home.xml
<LinearLayout android:orientation="vertical" android:id="@id/home_icons" android:paddingTop="5.0dip" android:paddingBottom="24.0dip" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1.0">
<LinearLayout android:gravity="bottom|center" android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content">
<include android:id="@id/home_news_feed_icon" layout="@layout/home_icon_view" />
<include android:id="@id/home_profile_icon" layout="@layout/home_icon_view" />
<include android:id="@id/home_friends_icon" layout="@layout/home_icon_view" />
</LinearLayout>
<LinearLayout android:gravity="bottom|center" android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content">
<include android:id="@id/home_messages_icon" layout="@layout/home_icon_view" />
<include android:id="@id/home_places_icon" layout="@layout/home_icon_view" />
<include android:id="@id/home_groups_icon" layout="@layout/home_icon_view" />
</LinearLayout>
<LinearLayout android:gravity="bottom|center" android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content">
<include android:id="@id/home_events_icon" layout="@layout/home_icon_view" />
<include android:id="@id/home_photos_icon" layout="@layout/home_icon_view" />
<include android:id="@id/home_chat_icon" layout="@layout/home_icon_view" />
</LinearLayout>
</LinearLayout>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.