android界面设计之布局

绝地灬酷狼 2024-02-17 14:48 2阅读 0赞

一、线性布局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin"
        tools:context=".Test01Activity" >
    
        
    
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal" >
    
            <Button
                android:id="@+id/btn1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="1" />
    
            <Button
                android:id="@+id/btn2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="2" />
    
            <Button
                android:id="@+id/btn3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="3" />
    
            <Button
                android:id="@+id/btn4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="4" />
        </LinearLayout>
    
        <LinearLayout
            android:layout_width="match_parent"
             android:layout_height="wrap_content"
            android:orientation="horizontal" >
    
            <Button
                android:id="@+id/btn5"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="4" />
    
            <Button
                android:id="@+id/btn6"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="5" />
    
            <Button
                android:id="@+id/btn7"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="6" 
                android:layout_weight="1"
                />
    
    
        </LinearLayout>
    
    </LinearLayout>

结果：

![Center][]

二、相对布局

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin"
        tools:context=".MainActivity" >
    
         
        <Button
                android:id="@+id/bbtn1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="中央" 
                android:layout_centerHorizontal="true"
                android:layout_centerVertical="true"
                />
        <Button
                android:id="@+id/bbtn2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="左上角"
                android:layout_above="@id/bbtn1" 
                android:layout_toLeftOf="@id/bbtn1" 
                />
        <Button
                android:id="@+id/bbtn3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="左下角"
                android:layout_below="@id/bbtn1"
                android:layout_toLeftOf="@id/bbtn1" 
                />
        <Button
                android:id="@+id/bbtn4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="右下" 
                android:layout_below="@id/bbtn1"
                android:layout_toRightOf="@id/bbtn1" 
    
                />
        <Button
                android:id="@+id/bbtn5"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_toRightOf="@id/bbtn1" 
    			android:layout_above="@id/bbtn1" 
                android:text="右上" 
                />
       
    
    </RelativeLayout>

结果：

![Center 1][]

三、网格布局

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:orientation="horizontal"  
        android:rowCount="5"  
        android:columnCount="4" > 
        
        
    　　<Button
                android:id="@+id/bbtn1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="中央" 
                android:layout_centerHorizontal="true"
                android:layout_centerVertical="true"
                />
    　　<Button
                android:id="@+id/bbtn1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="中央" 
                android:layout_centerHorizontal="true"
                android:layout_centerVertical="true"
                />
    　　<Button
                android:id="@+id/bbtn1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="中央" 
                android:layout_centerHorizontal="true"
                android:layout_centerVertical="true"
                />
    　　<Button
                android:id="@+id/bbtn1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="中央" 
                android:layout_centerHorizontal="true"
                android:layout_centerVertical="true"
                />
    　　<Button
                android:id="@+id/bbtn1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="中央" 
                android:layout_centerHorizontal="true"
                android:layout_centerVertical="true"
                />
    　　<Button
                android:id="@+id/bbtn1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="中央" 
                android:layout_centerHorizontal="true"
                android:layout_centerVertical="true"
                />
    　　<Button
                android:id="@+id/bbtn1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="中央" 
                android:layout_centerHorizontal="true"
                android:layout_centerVertical="true"
                />
    　　<Button
                android:id="@+id/bbtn1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="中央" 
                android:layout_centerHorizontal="true"
                android:layout_centerVertical="true"
                />
    　　<Button
                android:id="@+id/bbtn1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="中央" 
                android:layout_centerHorizontal="true"
                android:layout_centerVertical="true"
                />
    　　<Button
                android:id="@+id/bbtn1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="中央" 
                android:layout_centerHorizontal="true"
                android:layout_centerVertical="true"
                />
    　　<Button
                android:id="@+id/bbtn1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="中央" 
                android:layout_centerHorizontal="true"
                android:layout_centerVertical="true"
                />
    　　<Button
                android:id="@+id/bbtn1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="中央" 
                android:layout_centerHorizontal="true"
                android:layout_centerVertical="true"
                />
    　　<Button
                android:id="@+id/bbtn1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="中央" 
                android:layout_centerHorizontal="true"
                android:layout_centerVertical="true"
                />
    　　<Button
                android:id="@+id/bbtn1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="中央" 
                android:layout_centerHorizontal="true"
                android:layout_centerVertical="true"
                />
    　　<Button
                android:id="@+id/bbtn1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="中央" 
                />
    　　<Button
                android:id="@+id/bbtn1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_rowSpan="2"
                android:layout_gravity="fill"
                android:text="=" 
                />
    　　<Button
                android:id="@+id/bbtn1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="+" 
                
                android:layout_columnSpan="2"
                android:layout_gravity="fill"
                />
    　　<Button
                android:id="@+id/bbtn1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="中央" 
                />
      </GridLayout>

结果：

![Center 2][]

四、表格布局

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical"
        android:padding="3dip" >
    
        
       <TableLayout 
           android:layout_width="fill_parent"
           android:layout_height="wrap_content"
           android:stretchColumns="1"
           >
           <TableRow >
               <TextView   android:text="nihao"/>
               
           </TableRow>
            <TableRow >
               <TextView   android:text="你好ihdsakj "/>
                <Button   android:text="你好ihdsakj "/>
           </TableRow>
           <TableRow >
               <Button   android:text="你好ihdsakj "/>
               
           </TableRow>
              
       </TableLayout>
       
    
    </LinearLayout>

结果

:![Center 3][]

[Center]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/e1c808af21d041f0926778fe84b4b083.png
[Center 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/42611c6e3f7e444f97a6e594d3dcfbcb.png
[Center 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/61602e30dd42444b9d5acb2096d279ea.png
[Center 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/b282cdb151194ec69e2075eaad793628.png

发表评论取消回复

表情：

评论列表（有 0 条评论，2人围观）

还没有评论，来说两句吧...

相关阅读

相关 android界面设计之布局

一、线性布局 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

绝地灬酷狼/ 2024年02月17日 14:48/ 0 赞/ 3 阅读

相关 IDEA Android 网格布局(GridLayout）示例(计算器界面布局)

网格布局(GridLayout）示例程序效果（实现类似vivo手机自带计算器UI） ![22341974fec14cf5b2b818c8facef9df.png][]

浅浅的花香味﹌/ 2023年10月04日 22:36/ 0 赞/ 23 阅读

相关 android用户界面设计:基本按钮,Android用户界面设计：基本按钮

Android用户界面设计：基本按钮用户, Android, 应用程序本文向你展示了在你的Android应用程序中创建一个简单的Button或ImageButton控件

朴灿烈づ我的快乐病毒、/ 2022年10月17日 13:43/ 0 赞/ 253 阅读

相关【Android】IOS&Android界面设计规范

IOS&Android界面设计规范 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_a

墨蓝/ 2022年10月10日 06:05/ 0 赞/ 248 阅读

相关 android布局实践（二）login界面

1、主界面login.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:an

傷城~/ 2022年08月20日 11:28/ 0 赞/ 267 阅读

相关 android布局实践（一）home界面

1、主界面home.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:and

﹏ヽ暗。殇╰゛Y/ 2022年08月20日 11:26/ 0 赞/ 183 阅读

相关 Android用户界面设计教程

我们可以定义此行为的规定，对于每个按钮，控制权应该得到关注下。有四种XML的属性，你可以设置任何View控件定义的焦点顺序。这些属性是： Android版本：nextF

绝地灬酷狼/ 2022年08月08日 06:42/ 0 赞/ 240 阅读

相关 Android登录界面设计

Android登录界面设计这是之前项目的一个界面，现在抽出来給大家看看。界面： ![1][] 功能：（1）基本的判断，输入的是否为空这里没有判

太过爱你忘了你带给我的痛/ 2022年06月09日 08:42/ 0 赞/ 291 阅读

相关 Java图形界面之布局设计

在界面设计中，一个容器要放置许多组件，为了美观，为组件安排在容器中的位置，这就是布局设计。java.awt中定义了多种布局类，每种布局类对应一种布局的策略。常用的有以下布局类：

雨点打透心脏的1/2处/ 2022年05月17日 03:52/ 0 赞/ 277 阅读

相关 Android布局之表格布局

表格布局（Tablelayout）简介： Tablelayout类以行和列的形式对控件进行管理，每一行为一个TableRow对象，

àì夳堔傛蜴生んèń/ 2022年04月22日 00:46/ 0 赞/ 335 阅读