安卓用户界面屏幕

Question

美好的一天，

我是 Android UI 开发的新手。请问我将如何实现这种 UI 屏幕的任何知识：

提前致谢。

Answer 1

这是 TextView 的代码。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:id="@+id/upparLayout1"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="#9DAD0C"
        android:orientation="horizontal"
        android:weightSum="3">

        <TextView
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_weight="1"
            android:background="#9DAD0C"
            android:text="Tab1" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_weight="1"
            android:background="#717D11"
            android:text="Tab2" />
    </LinearLayout>

    <TextView
        android:id="@+id/screen1"
        android:layout_width="match_parent"
        android:layout_height="120dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_below="@+id/upparLayout1"
        android:background="#CD5E93"
        android:text="Screen1" />

    <LinearLayout
        android:id="@+id/middleLayout"
        android:layout_width="match_parent"
        android:layout_height="120dp"
        android:layout_below="@+id/screen1"
        android:background="#9F165A"
        android:orientation="horizontal"
        android:weightSum="2">

        <TextView
            android:layout_width="0dp"
            android:layout_height="120dp"
            android:layout_weight="1"
            android:text="SubTab1" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="120dp"
            android:layout_weight="1"
            android:text="SubTab2" />
    </LinearLayout>

    <TextView
        android:id="@+id/textView2"
        android:layout_width="match_parent"
        android:layout_height="120dp"
        android:layout_below="@+id/middleLayout"
        android:background="#A9BB2B"
        android:text="List Based on Sub Tab" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="match_parent"
        android:layout_height="120dp"
        android:layout_below="@+id/textView2"
        android:layout_centerHorizontal="true"
        android:background="#A9BB2B"
        android:text="List Based on Sub Tab" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:layout_alignParentBottom="true"
        android:layout_below="@+id/textView3"
        android:layout_centerHorizontal="true"
        android:background="#A9BB2B"
        android:text="Button" />

</RelativeLayout>

Answer 2

您可以在以下链接中找到创建该布局所需的一切：

• Google Play Style Tabs using TabLayout (Android M)
• Action Bar Tabs

至于每个选项卡的布局，您可以这样做（作为结构）

<RelativeLayout>
    <LinearLayout> // or you can use a fragment
    //Screen 1 content
    </LinearLayout>
    <SubTabs>
    <SubTabs>
</RelativeLayout>

对于子标签内容：

<?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:weightSum="2">

<ListView
    android:id="@+id/list1"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:layout_marginBottom="10dp"/> //replace margin with your value

<ListView
    android:id="@+id/list2"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:layout_marginBottom="10dp"/> //replace margin with your value

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" 
    android:layout_gravity="center"/>

</LinearLayout>