Android五種布局方式——LinearLayout、RelativeLayout、TableLayout....（四）

標籤：

Android五種布局方式——LinearLayout、RelativeLayout 、TableLayout....

Android使用XML聲明介面布局

將程式的表現層和控制層分離
修改使用者介面時，無需更改程式的原始碼

視覺化檢視設計使用者介面

Android五種布局方式
LinearLayout線性布局
AbsoluteLayout座標布局
RelativeLayout相對布局    
FrameLayout幀布局
TableLayout表格布局

GridLayout

1.LinearLayout線性布局

2.FrameLayout幀布局

最簡單的布局形式
組件都放在螢幕的左上方，組件是按次序加入次序層疊在一起，上一層的控制項會覆蓋下一層的控制項

3.TableLayout表格布局

Tablelayout以行和列的形式對控制項進行管理，每一行為一個TableRow對象，或一個View控制項。
當為TableRow對象時，可在TableRow下添加子控制項，預設情況下，每個子控制項佔據一列。有多少個子控制項就有多少列
當為View時，該View將獨佔一行

4.RelativeLayout相對布局   

一種非常靈活的布局方式
通過指定介面元素與其他元素的相對位置關係，確定介面中所有元素的布局位置
特點：能夠最大程度保證在各種螢幕類型的手機上正確顯示介面布局

布局範例

<?xml version="1.0" encoding="utf-8"?><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"    tools:context="com.example.jreduch7292.BuJuActivity"><LinearLayout    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:orientation="vertical"    >    <TextView        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:text="熱門評論"        android:textColor="#f40505"        android:layout_marginLeft="80dp"        android:textSize="30dp"        />    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:orientation="horizontal"        >        <ImageView            android:layout_width="80dp"            android:layout_height="80dp"            android:src="@mipmap/zyf"            />        <LinearLayout            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:orientation="vertical"            >            <TextView                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:text="HighSmile山人"                android:textColor="#1048ef"                android:textSize="30dp"                />            <TextView                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:text="丹麥治安一直都很好，這種事估計可以震動他們全國了"                android:textColor="#000000"                android:textSize="30dp"                />        </LinearLayout>    </LinearLayout>    <LinearLayout        android:layout_width="match_parent"        android:layout_height="90dp"        android:orientation="horizontal"        android:layout_marginLeft="80dp"        android:background="#8c8282"        >        <ImageView            android:layout_width="80dp"            android:layout_height="80dp"            android:src="@mipmap/zyfzyf"            />        <TextView            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:text="丹麥連發2起槍擊案致1死6傷尚不清楚是否相關"            android:textColor="#000000"            android:textSize="25dp"            />    </LinearLayout>    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:orientation="horizontal"        android:layout_marginLeft="80dp"        >        <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="5小時前"            android:textColor="#000000"            android:textSize="20dp"            />        <ImageView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:src="@mipmap/like"            android:layout_marginLeft="50dp"            />        <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="200"            android:textColor="#000000"            android:textSize="20dp"            />        <ImageView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:src="@mipmap/message"            android:layout_marginLeft="30dp"            />        <TextView            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:text="1"            android:textColor="#000000"            android:textSize="20dp"            />    </LinearLayout>    <TextView        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:text="查看1條評論"        android:textColor="#1295f2"        android:textSize="25dp"        android:layout_marginLeft="80dp"        /></LinearLayout></RelativeLayout>

進階控制項圖片左右劃屏

<pre name="code" class="java">package com.example.jreduch7292;import android.os.Bundle;import android.support.v4.view.PagerAdapter;import android.support.v4.view.ViewPager;import android.support.v7.app.AppCompatActivity;import android.view.View;import android.view.ViewGroup;import java.util.ArrayList;import java.util.List;import uk.co.senab.photoview.PhotoView;public class ViewPagerActivity extends AppCompatActivity {private ViewPager vp;    private List<PhotoView> myData;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_view_pager);        vp= (ViewPager) findViewById(R.id.vp);        myData=new ArrayList<>();        PhotoView img=new PhotoView(this);        img.setImageResource(R.mipmap.zyfzyf);         myData.add(img);        img=new PhotoView(this);        img.setImageResource(R.mipmap.zyf);        myData.add(img);        img=new PhotoView(this);        img.setImageResource(R.mipmap.zz);        myData.add(img);        img=new PhotoView(this);        img.setImageResource(R.mipmap.zzz);        myData.add(img);        vp.setAdapter(new MyViewPagerAdapter(myData));    }    public class MyViewPagerAdapter extends PagerAdapter{private  List<PhotoView> myData;        public MyViewPagerAdapter(List<PhotoView> myData){            this.myData=myData;        }        @Override        public int getCount() {            return myData.size();        }        @Override        public boolean isViewFromObject(View view, Object object) {            return view==object;        }        @Override        public Object instantiateItem(ViewGroup container, int position) {            container.addView(myData.get(position));            return myData.get(position);        }        @Override        public void destroyItem(ViewGroup container, int position, Object object) {            container.removeView(myData.get(position));        }    }}

衝天之峰   20160729

Android五種布局方式——LinearLayout、RelativeLayout、TableLayout....（四）