布局+基本UI

標籤：

常見布局RelativeLayout(相對布局)

• 相對於父布局進行定位

•  android:layout_centerHorizontal    橫向置中 android:layout_centerVertical      縱向置中 android:layout_centerInParent      橫向縱向置中

• 使用方式為上(下)+左或右

      android:layout_alignParentTop       上    android:layout_alignParentButton    下    android:layout_alignParentLeft      左    android:layout_alignParentRight     右    adnroid:layout_centerInParent       置中

• 相對控制項進行定位

  • android:layout_above 位於控制項上方
  • android:layout_below 位於控制項下方
  • android:layout_toLeftOf 位於控制項左側
  • android:layout_toRightOf 位於控制項右側

LinearLayout(線性布局)

• linearLayout的orientation排列方向 horizontal水平(預設) vertical垂直
  
  • (horizontal)水平布局內部控制項不能將寬度定義為match_parent
  • (vertical)垂直布局內部控制項不能將高度定義為match_parent

• android:layout_weight設個屬性允許使用比例的方式來指定控制項的大小,

  • 在手機螢幕的適配性方面非常重要
  • 將控制項的寬度指定為0dp, android:layout_weight的屬性指定為1,這表示控制項將在水平方向平分寬度
  • 設定為1 表示都站二分之一
    
    • 如果Edittext的 android:layout_weight=3
    • Button android:layout_weight=2
    • 則表示EditText佔五分之三 Button佔五分之二

• 指定EditText的andorid:layout_weight的屬性 ,並將Button的寬度改回wrap_content,這表示Button的寬度按照wrap_content計算,而EditText將會佔滿螢幕的剩餘空間

TableLayout(表格版面配置)

• TableRow表示在表格中添加一行,在TableRow中的每個控制項就表示一列

  • TableRow中的控制項是不能指定寬度的
  • android:inputType屬性的值為textPassword,指定為密碼輸入框
  • android:layout_span=”2”表示跨越兩列
  • android:stretchConlumns屬性工作表示展開列,可以起到自動適應螢幕寬度的作用

常見UI組件和修飾文本按鈕輸入框

• Button,EditText都繼承於TextView

TextView

<TextView    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:onClick="myClick"  //設定點擊事件方法    android:clickable="true"   //支援點擊事件    android:text="我是一個文本" //顯示文本    android:background="#F00" //文本背景    android:textSize="18sp"   //字型大小    android:textColor="#FF0"  //字型顏色    android:textStyle="bold|italic"//字型加粗    android:lines="3"         //所佔行數    android:singleLine="true" //只顯示在一行/>

EditText

<EditText    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:hint="hello"      //提示內容    android:editable="false"  //是否可以編輯    android:inputType="number"//輸入的類型    android:maxLength="5"     //字元長度/>

是非選擇框 ToggleButton

*

    <ToggleButton    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:text="@string/hello_world"    android:textOn="開常值內容"    android:textOff="關常值內容"     />

• 選項按鈕 RadioButton

  <RadioButton     android:id="@+id/rb_a"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:text="蘋果" /><RadioButton     android:id="@+id/rb_b"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:text="西瓜" /><RadioButton     android:id="@+id/rb_c"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:text="菠蘿" />

• 多選框 CheckBox

   <CheckBox    android:id="@+id/cbx_a"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:text="蘋果" /><CheckBox    android:id="@+id/cbx_b"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:text="香蕉" /><Buttonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:onClick="myClick"   //添加點擊事件android:text="確定"   />

進度條 ProgressBar

• 沒有進度的進度條

  <ProgressBarandroid:id="@+id/progressBar1"android:layout_width="wrap_content"android:layout_height="wrap_content"style="?android:attr/progressBarStyleLarge"//大的進度條style="?android:attr/progressBarStyleSmall"//小的進度條/>

• 　有進度的進度條　

  <ProgressBarandroid:id="@+id/progressBar1"style="?android:attr/progressBarStyleHorizontal"    //設定有進度的進度條android:layout_width="match_parent"android:layout_height="wrap_content"android:max="150"   //最大進度android:progress="50" //當前進度 />

• 可拖動的進度條 SeekBar

  <SeekBar android:layout_width="200dp"android:layout_height="wrap_content"android:max="100"   //最大進度android:progress="30"  //當前進度/>

• 　星星進度條　RatingBar

  <RatingBar   android:layout_width="wrap_content"   android:layout_height="wrap_content"   android:numStars="6"     //顯示星星個數   android:rating="3.5"     //預設進度   android:stepSize="0.3"   //可調最小進度    />

圖片控制項 ImageView

<ImageView    android:layout_width="80dp"    android:layout_height="80dp"    android:background="#F00"    android:scaleType="matrix"  //設定圖片的縮放模式    android:src="@drawable/flower" />

滑動控制項 ScrollView

• ScrollView 垂直滑動
• HorizontalScrollView 水平滑動
• ScrollView和HorizntalScrollView只可以二選一
• scrollbars 捲軸的樣式

• <ScrollView //垂直滑動  HorizontalScrollView是水平滑動 android:layout_width="match_parent"android:layout_height="match_parent"android:scrollbars="none" //捲軸><LinearLayout    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical" >        //垂直布局    <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!"        android:textSize="60sp" />          //字型大小    <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:textColor="#F00"            //字型顏色        android:text="Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!"        android:textSize="90sp" /></LinearLayout>

ShapeDrawable

用途：圓角的輸入框 按鈕的背景

• 1:建立drawable檔案夾

• 2:建立shape檔案,檔案名稱=業務名_控制項名縮寫_bg

  //添加到按鈕背景

  //stroke  邊<stroke android:width="0.5dp"   //width邊的粗細程度    android:color="#FAAA"   //color邊的顏色    />//gradient  漸層色  <gradient android:startColor="#FF0"        android:endColor="#0FF"         android:angle="45"    //漸層的角度      />  <corners android:radius="5dp" //設定圓角     />

  //添加到文字框

  <stroke android:width="2dp"     android:color="#F888"/><solid android:color="#FFFF"/>  //solid實體顏色<corners android:radius="5dp"/>

• 3:應用到控制項上

  <EditTextandroid:id="@+id/editText1"android:layout_width="match_parent"android:layout_height="wrap_content"android:background="@drawable/et_bg_shap" //引入控制項 />

SelectorDrawable

Selector: 如果想改變某個控制項在某種狀態下的背景 就需要使用SelectorDrawable.

• 1:建立drawable檔案夾

• 2:建立Selector檔案

  <?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android" >    <!-- 設定兩種不同狀態的圖片  -->    <!-- state_pressed修改為true,按下的圖片 -->    <item android:state_pressed="true" android:drawable="@drawable/pressed" />    <!-- 預設圖片 預設情況下不需要設定狀態 --><item android:drawable="@drawable/normal"/></selector>

  //改變按鈕點擊後的字型顏色,以及背景顏色

  1:在drawable檔案夾下建立selector檔案 (字型顏色)

  <?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android" >    <!-- android:color 字型的顏色 系統沒有提示  -->    <!-- 有些系統在顯示的時候會報錯 這裡不能直接寫顏色值 需要把顏色值放到res/values/colors.xml-->    <item android:state_pressed="true" android:color="@color/btn_txt_pressed"/><item android:color="@color/btn_txt_normal"/></selector>

  2:在values檔案夾下建立colors檔案

  <?xml version="1.0" encoding="utf-8"?><resources>    <color name="btn_txt_normal">#0F0</color>    <color name="btn_txt_pressed">#F00</color></resources>

  //改變按鈕點擊後的背景顏色

  <?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android" ><!-- item裡面嵌套shap --><!-- 按下的背景圖 --><item android:state_pressed="true" >    <shape >        <!-- 背景顏色 -->        <solid android:color="#FF0" />         <!-- 背景圓角 -->        <corners android:radius="5dp"/>    </shape></item><!-- 預設背景圖 --><item>    <shape >        <solid android:color="#888" />        <corners android:radius="5dp"/>    </shape>    </item></selector>

LayerlistDrawable

改變進度條的背景 LayerlistDrawable

• 1:建立drawable檔案夾

• 1:建立Layerlist檔案

  <?xml version="1.0" encoding="utf-8"?><layer-list xmlns:android="http://schemas.android.com/apk/res/android" >    <!-- 設定一個背景圖  設定進度的圖片-->    <!-- 有順序之分 背景圖 放在最上面 進度的圖片放在下面 -->    <!-- id 是為了告訴系統 我們想將圖片放到什麼地方去 -->    <item android:drawable="@drawable/progress_bar_bg" android:id="@android:id/background"/>    <item android:drawable="@drawable/progress_bar_selected_bg" android:id="@android:id/progress"/></layer-list>

• 3:應用到控制項

  <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"    ><!-- progressDrawable 設定進度條背景 --><ProgressBar    android:id="@+id/progressBar1"    style="?android:attr/progressBarStyleHorizontal"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:max="150"    android:progress="35"    android:progressDrawable="@drawable/pb_bg"  /></RelativeLayout>

NinePatch

布局+基本UI