Android的學習第六章(布局一LinearLayout)

今天我們來說一下Android五大布局-LinearLayout布局(線性布局)

　　含義:線性布局,顧名思義,指的是整個Android布局中的控件擺放方式是以線性的方式擺放的,

　　主要作用:主要對整個界面進行基本設置使用

　　重要屬性:android:orientation 值:horizontal 元素水平擺放  |  vertical 元素垂直擺放

　　看代碼:

　　

<!-- 
    第一個線性布局, 我們可以視為html中的div,用於對於整個界面進行布局
    這里面 xmlns:android和xmlns:tools指定的是xml文件的命名空間,不是對布局的主要設置
    但是要有
    android:layout_width="match_parent"指的是當前的線性布局寬度占整個父元素，這里相對於
    當前的線性布局父元素為當前的窗體,所以寬度占滿窗體
    android:layout_height="match_parent"指的是當前的線性布局高度占整個父元素，這里相對於
    當前的線性布局父元素為當前的窗體,所以高度占滿窗體
    tools:context="com.example.activitylife.MainActivity":用於指定渲染上下文
    android:orientation="vertical":指的是當前控件為垂直擺放
-->
<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"
    tools:context="com.example.activitylife.MainActivity"
    android:orientation="vertical">
    <!-- 
        第二個線性布局,這里我們放置在大的線性布局中,作為子布局使用,設置背景顏色為藍色 
        這里面android:layout_width="match_parent"指的是寬度占滿父元素LinearLayout的寬度
            android:layout_height="100dp"高度占100dp
            android:background="@android:color/holo_blue_bright"設置背景色
    -->
    <LinearLayout 
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="@android:color/holo_blue_bright">
    </LinearLayout>
    <!-- 
        第三個線性布局,這里我們放置在大的線性布局中,作為子布局使用,設置背景顏色為綠色
        這里面android:layout_width="match_parent"指的是寬度占滿父元素LinearLayout的寬度
            android:layout_height="200dp"高度占200dp
            android:background="@android:color/holo_green_light"設置背景色
     -->
    <LinearLayout 
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:background="@android:color/holo_green_light">
    </LinearLayout>
</LinearLayout>

整段代碼界面效果圖是:

　　　　

只是一段代碼和效果圖我們不知道怎么做到對一個Android界面的繪制,根據我對線性布局的簡單理解,我認為是想用線性布局作出較好的布局效果主要可以這樣用

使用線性布局特效對整體的元素進行布局,至於元素與元素之間的微調我們可以通過Margin屬性進行微調

下面是一個簡答的線性布局模仿微信界面的案例,希望大家能夠有所收獲

　　　　

　　需要用到的字符串資源定義到string.xml文件中

　　

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">我的微信布局</string>
    <string name="hello_world">Hello world!</string>
    <string name="action_settings">Settings</string>

    
    <!-- 微信第三面板使用 -->
    <string name="friendcacl">朋友圈</string>
    <string name="saoyisao">掃一掃</string>
    <string name="yaoyiyao">搖一搖</string>
    <string name="aroundperson">附近的人</string>
    <string name="piaoping">漂流瓶</string>
    <string name="shop">購物</string>
    <string name="game">游戲</string>
    

</resources>

 

 

　　我們需要用到顏色的自定義:在color.xml文件中可以自定義我們需要的顏色

　　

　　內容代碼是:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- 淡灰 -->
    <color name="dangrey">#CCCCCCCC</color>
    <!-- 灰色 -->
    <color name="grey">#999999</color>
    <!-- 淺灰,不清楚,大家自己可以去找顏色的定義 -->
    <color name="grey2">#888888</color>
    <!-- 綠色 -->
    <color name="green">#07bb07</color>
    
</resources>

 　　這里我們要用到樣式文件先看樣式文件中的定義,打開value中的styles.xml文件,把樣式定義在其中

　　　　

　　內容代碼:

　　

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

    <!--
        Base application theme for API 11+. This theme completely replaces
        AppBaseTheme from res/values/styles.xml on API 11+ devices.
    -->
    <style name="AppBaseTheme" parent="android:Theme.Holo.Light">
        <!-- API 11 theme customizations can go here. -->
    </style>

    <!-- 以下是樣式的主要布局代碼 -->
    <!-- 
        myteststyle樣式中聲明了要用到的樣式
        android:layout_width:match_parent元素占滿父元素
        android:layout_marginTop頂部外邊距15dp
        android:background:背景色為白色
     -->
    <style name="myteststyle">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_marginTop">15dp</item>
        <item name="android:background">@android:color/white</item>
    </style>
    <!-- 
        對圖片控件的樣式設置
        android:layout_width:設置寬度
        android:layout_height:設置高度
        android:background:引入color中的聲明為grey的顏色
        android:layout_gravity:設置當前元素在父元素的位置為水平居中
    -->
    <style name="imagestyle">
        <item name="android:layout_width">295dp</item>
        <item name="android:layout_height">0.5dp</item>
        <item name="android:background">@color/grey</item>
        <item name="android:layout_gravity">center_horizontal</item>
    </style>
    <!-- 
        android:layout_width:設置寬度占滿父元素
        android:layout_height:設置高度40dp
        android:background:引入Android內置白色
        android:orientation:設置內容水平擺放
    -->
    <style name="innerstyle">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">40dp</item>
        <item name="android:background">@android:color/white</item>
        <item name="android:orientation">horizontal</item>
    </style>
</resources>

 布局代碼:

<!-- 
    外層的線性布局設置為元素垂直擺放
    那么當前線性布局中的內容都是垂直的
    這里引入了color.xml文件中的淡灰色背景色
 -->
<?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:background="@color/dangrey">
    
    <!-- 
        第一個線性布局
        style="@style/myteststyle" 引入了我們聲明的一個樣式
        使得這個線性布局是--寬度占滿父元素,頂部外邊距15dp,背景色白色
        而線性布局也有獨有的一些屬性高度為40dp,內容水平擺放
    -->
    <LinearLayout 
        style="@style/myteststyle"
        android:layout_height="40dp"
        android:orientation="horizontal">
        <ImageView
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:layout_margin="10dp"
            android:layout_gravity="center_vertical"
            android:src="@drawable/sendmessage"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/friendcacl"
            android:layout_gravity="center_vertical"/>
        <TextView
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            android:layout_weight="1"/>
        <ImageView 
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_margin="8dp"
            android:layout_gravity="center_vertical"
            android:src="@drawable/ic_launcher"/>
    </LinearLayout>
    
    
    <!-- 
        第二個線性布局也是引入了之前的myteststyle樣式,但是這里高度設置為81dp,里面放置倆個線性布局 
        內容設置設置為垂直擺放
    -->
    <LinearLayout 
        style="@style/myteststyle"
        android:layout_height="81dp"
        android:orientation="vertical">
        <!-- 掃一掃 -->
        <!-- 
            引入了style中的innerstyle樣式 意思就是
            設置寬度占滿父元素,設置高度40dp,引入Android內置白色,設置內容水平擺放
         -->
        <LinearLayout style="@style/innerstyle">
            <ImageView
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:layout_margin="10dp"
                android:layout_gravity="center_vertical"
                android:src="@drawable/sendmessage"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/saoyisao"
                android:layout_gravity="center_vertical"/>
            <TextView
                android:layout_height="wrap_content"
                android:layout_width="match_parent"
                android:layout_weight="1"/>
        </LinearLayout>
        
        <!-- 中間線條 -->
        <!-- 
            這里一個ImageView控件用來代替掃一掃和搖一搖中間的線條,引入了imagestyle樣式
            設置寬度 295dp設置高度0.5dp,引入color中的聲明為grey的顏色
            設置當前元素在父元素的位置為水平居中
         -->
        <ImageView style="@style/imagestyle"/>
        <!-- 搖一搖 -->
        <!--
             與上面的掃一掃同樣,引入了innerstyle樣式
            設置寬度占滿父元素,設置高度40dp,引入Android內置白色,設置內容水平擺放
         -->
        <LinearLayout style="@style/innerstyle">
            <ImageView
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:layout_margin="10dp"
                android:layout_gravity="center_vertical"
                android:src="@drawable/sendmessage"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/yaoyiyao"
                android:layout_gravity="center_vertical"/>
            <TextView
                android:layout_height="wrap_content"
                android:layout_width="match_parent"
                android:layout_weight="1"/>
        
        </LinearLayout>
        
    </LinearLayout>
   
    
    <!-- 
        第三個與上面的線性布局大致都相同了,打擊如果能看懂上面的,下面的布局都是相差無幾的
    -->
    <LinearLayout
        style="@style/myteststyle"
        android:layout_height="81dp"
        android:orientation="vertical">
        <!-- 附近的人 -->
        <LinearLayout style="@style/innerstyle">
            <ImageView
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:layout_margin="10dp"
                android:layout_gravity="center_vertical"
                android:src="@drawable/sendmessage"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/shop"
                android:layout_gravity="center_vertical"/>
            <TextView
                android:layout_height="wrap_content"
                android:layout_width="match_parent"
                android:layout_weight="1"/>
        
        </LinearLayout>
        <!-- 中間線條 -->
        <ImageView style="@style/imagestyle"/>
        <!-- 漂流瓶 -->
        <LinearLayout style="@style/innerstyle">
            <ImageView
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:layout_margin="10dp"
                android:layout_gravity="center_vertical"
                android:src="@drawable/sendmessage"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/game"
                android:layout_gravity="center_vertical"/>
            <TextView
                android:layout_height="wrap_content"
                android:layout_width="match_parent"
                android:layout_weight="1"/>
        
        </LinearLayout>
        
    </LinearLayout>
    
    <!-- 第四個 -->
    <LinearLayout
        style="@style/myteststyle"
        android:layout_height="81dp"
        android:orientation="vertical">
        <!-- 附近的人 -->
        <LinearLayout style="@style/innerstyle">
            <ImageView
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:layout_margin="10dp"
                android:layout_gravity="center_vertical"
                android:src="@drawable/sendmessage"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/aroundperson"
                android:layout_gravity="center_vertical"/>
            <TextView
                android:layout_height="wrap_content"
                android:layout_width="match_parent"
                android:layout_weight="1"/>
        
        </LinearLayout>
        <!-- 中間線條 -->
        <ImageView style="@style/imagestyle"/>
        <!-- 漂流瓶 -->
        <LinearLayout style="@style/innerstyle">
            <ImageView
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:layout_margin="10dp"
                android:layout_gravity="center_vertical"
                android:src="@drawable/sendmessage"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/piaoping"
                android:layout_gravity="center_vertical"/>
            <TextView
                android:layout_height="wrap_content"
                android:layout_width="match_parent"
                android:layout_weight="1"/>
        </LinearLayout>
        
    </LinearLayout>
     
    


</LinearLayout>

 

　　以上就是我所做的一個簡單的微信頁面的簡單布局的案例,希望大家能夠有所收獲,這里本人認為使用線性布局就是使用它將大致布局列舉出來然后使用屬性來微調,就可以做到大致的布局了