Android 開發 (佈局和動畫)

阿新 • • 發佈：2021-09-03

Android 開發 (佈局和動畫)

LinearLayout

屬性

orientation 佈局中元件的排列方式

gravity 控制組件所包含的子元素的對其方式可多個組合

layout_gravity 控制該元件在父容器裡的對其方式

background 為元件設定一個背景圖片或者是直接用顏色覆蓋

divider 分割線

showDividers 設定分割線所在的位置 none(無) beginning(開始) end(結束) middle(每兩個元件間)

dividerPaddding 設定分割線的padding(邊距)

layout_weight (權重) 該屬性是用來等比列劃分區域

RelaticeLayout(相對佈局)

常見屬性

根據父容器定位

layout_alignPatenLeft 左對齊

layout_alignParentRight 右對齊

layout_alignParentTop 頂部對齊

layout_alignParentBottom 底部對齊

layout_centerHorizontal 水平居中

layout_centerVertical 垂直居中

layout_centerParent 中間位置

根據兄弟元件定位

layout_toLeftOf 放置於參考元件的左邊

layout_toRightOf 放置於參考元件的右邊

layout_above 放置參考元件的上方

layout_below 放置參開元件下方

layout_alignTop 對齊參開元件的上邊界

layout_alignBottom 對齊參考元件的下邊界

layout_alignLeft 對齊參考元件的左邊界

layout_alignRight 對齊參考元件的右邊界

同用屬性

margin 設定元件與父容器的邊距

layout_margin 上下左右偏移

layout_marginLeft

layout_marginRight

layout_marginTop

layout_marginBottom

padding 設定元件內部元素的邊距

FrameLayout(幀佈局)

從頁面左上角開始

常見屬性

foreground 設定前景

foregroundGravity 設定前景位置

TableLayout(表格佈局)

TableRow 一行

<?xml version="1.0" encoding="utf-8"?>
<TableLayout android:layout_height="match_parent"
    android:layout_width="match_parent"
    xmlns:android="http://schemas.android.com/apk/res/android">
<!--    <TableRow> 一行-->
    <TableRow>
        <Button
            android:text="one"
            />
        <Button
            android:text="one"
            />
        <Button
            android:text="one"
            />
        <Button
            android:text="one"
            />
    </TableRow>
    <Button
        android:text="one"
        />

</TableLayout>

常用屬性

collapseColumns 設定需要被隱藏的列的序號從0開始

stretchColumns 設定允許被拉昇的列的列序號從0開始

shrinkColumns 設定允許被收縮的列的列序號從0開始

子控制元件設定屬性

layout_column 顯示在第幾列

layout_span 橫向跨幾列

GridLayout(網格佈局)

常用屬性

orientation 設定水平顯示還是垂直顯示

columnCount 設定行的顯示個數

rowCount 設定列的顯示個數

子控制元件屬性

layout_column 顯示在第幾列

layout_collumnSpan 橫向跨幾列

layout_columnWeight 橫向剩餘空間分配方式

layout_gravity 在網格的顯示位置

layout_row 顯示在第幾行

layout_rowSpan 橫向跨幾行

layout_rowWeight 匯流排剩餘空間分配方式

ConstraintLayout(約束佈局)

ListView

使用預設的介面卡

建立一個list_view 容器

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

    <ListView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/list_view"
        ></ListView>

</LinearLayout>

生成ArrayAdapter 把介面卡放入容器

protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.list_view);
    //容器 介面卡 資料
        ArrayAdapter<String> adapter = new ArrayAdapter<>(this, android.R.layout.simple_list_item_1,data);
        ListView viewById = findViewById(R.id.list_view);
        viewById.setAdapter(adapter);

動畫

幀動畫

幀動畫就是順序播放一組預先定義好的圖片，就類似於我們觀看視訊，就是一張一張的圖片連續播放。

放入圖片在 drawable資料夾中

建立frame_animation檔案

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
	android:oneshot="false">
	<item android:drawable="@drawable/image01" android:duration="500"/>
	<item android:drawable="@drawable/image02" android:duration="500"/>
	<item android:drawable="@drawable/image03" android:duration="500"/>
</animation-list>

使用AnimationDrawable 播放

    Button button = (Button) findViewById(R.id.bt_001);
    button.setBackgroundResource(R.drawable.frame_animation);//把Drawable設定為button的背景
    //拿到這個我們定義的Drawable，實際也就是AnimationDrawable
    AnimationDrawable animationDrawable = (AnimationDrawable) button.getBackground();
    animationDrawable.start();//開啟動畫

補間動畫

設定它開始和結束的位置，中間的view會自動由系統補齊，而不需要幀動畫每一幅圖都是提前準備好的。

主要支援四種效果：平移、縮放、旋轉、透明度變化（漸變）四種基本效果

名稱	子類	效果
平移	TranslateAnimation	移動view
縮放動畫	ScaleAnimation	放大或縮小view
旋轉動畫	RotateAnimation	旋轉view
透明度	AlphaAnimation	改變view透明度

平移

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXDelta="100"
    android:fromYDelta="0"
    android:toXDelta="0"
    android:toYDelta="0"/>

縮放

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fromXScale="0.0"
    android:fromYScale="0.0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toXScale="1.0"
    android:toYScale="1.0"/>

旋轉

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
      android:fromDegree="0"
      android:toDegree="1800"
      android:pivotX = "50%"
      android:pivotY="50%"
      android:duration = "3000"
/>

漸變

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fromAlpha="1.0"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator" 表示動畫插值器， 可以控制動畫的變化速率
    android:toAlpha="0.0" />

組合動畫

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
 android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    >
    <scale
        android:duration="3000"
        android:fromXScale="0.0"
        android:fromYScale="0.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="1.0"
        android:toYScale="1.0"/>
    <alpha
        android:duration="3000"
        android:fromAlpha="1.0"
        android:toAlpha="0.5" />
    <rotate
        android:fromDegrees="0"
        android:toDegrees="720"
        android:pivotX = "50%"
        android:pivotY="50%"
        android:duration = "3000"
        />
    <translate
        android:fromXDelta="0"
        android:toXDelta="100"
        android:fromYDelta="0"
        android:toYDelta="100" />
</set>

動畫監聽

Animation.addListener(new AnimatorListener() {
      @Override
      public void onAnimationStart(Animation animation) {
          //動畫開始時執行
      }

       @Override
      public void onAnimationRepeat(Animation animation) {
          //動畫重複時執行
      }

     @Override
      public void onAnimationCancel()(Animation animation) {
          //動畫取消時執行
      }

      @Override
      public void onAnimationEnd(Animation animation) {
          //動畫結束時執行
      }
  });

屬性動畫

屬性動畫和補間動畫的區別

補間動畫只能定義兩個關鍵幀在透明、旋轉、位移和傾斜這四個屬性的變換，但是屬性動畫可以定義任何屬性的變化。
補間動畫只能對 UI 元件執行動畫，但屬性動畫可以對任何物件執行動畫

建立定義屬性動畫，有兩種方式

使用 ValueAnimator 或者 ObjectAnimator 的靜態工廠方法建立動畫。
使用資原始檔來定義動畫。

屬性

動畫持續時間。預設為 300ms，可以通過 android:duration 屬性指定。
動畫插值方式。通過 android:interploator 指定。
動畫重複次數。通過 android:repeatCount 指定。
重複行為。通過 android:repeatMode 指定。
動畫集。在屬性資原始檔中通過 <set …/> 來組合

屬性動畫 API

Animator: 提供建立屬性動畫的基類，基本不會直接使用這個類。
ValueAnimator:屬性動畫用到的主要的時間引擎，負責計算各個幀的屬性值，基本上其他屬性動畫都會直接或間接繼承它；
ObjectAnimator： ValueAnimator 的子類，對指定物件的屬性執行動畫。
AnimatorSet：Animator 的子類，用於組合多個 Animator。

Evaluator ，用來控制屬性動畫如何計算屬性值。

IntEvaluator:計算 int 型別屬性值的計算器。
FloatEvaluator: 用於計算 float 型別屬性值的計算器。
ArgbEvaluator: 用於計算十六進位制形式表示的顏色值的計算器。
TypeEvaluator: 可以自定義計算器。

ViewPager

在主檔案中寫入

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    tools:context="com.example.testviewpage_1.MainActivity" >
 
<android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center" />
 
</RelativeLayout>

在layout中建立多個滑動頁面 (示例)

<?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:background="#ffffff"
    android:orientation="vertical" >
    
 
</LinearLayout>

MainActivity 類

package com.example.testviewpage_1;
/**
 * @author  harvic
 * @date 2014.8.9
 */
import java.util.ArrayList;
import java.util.List;
import java.util.zip.Inflater;
 
import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
 
 
public class MainActivity extends Activity {
 
	private View view1, view2, view3;
	private ViewPager viewPager;  //對應的viewPager
	
	private List<View> viewList;//view陣列
   
   
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        viewPager = (ViewPager) findViewById(R.id.viewpager);
        LayoutInflater inflater=getLayoutInflater();
        view1 = inflater.inflate(R.layout.layout1, null);
        view2 = inflater.inflate(R.layout.layout2,null);
        view3 = inflater.inflate(R.layout.layout3, null);
        
        viewList = new ArrayList<View>();// 將要分頁顯示的View裝入陣列中
		viewList.add(view1);
		viewList.add(view2);
		viewList.add(view3);
		
		//PageAdapter——PageView的介面卡 
		PagerAdapter pagerAdapter = new PagerAdapter() {
			
			@Override
			//
			public boolean isViewFromObject(View arg0, Object arg1) {
				// TODO Auto-generated method stub
				return arg0 == arg1;
			}
			
			@Override
			//返回要滑動的VIew的個數
			public int getCount() {
				// TODO Auto-generated method stub
				return viewList.size();
			}
			
			@Override
			//從當前container中刪除指定位置（position）的View
			public void destroyItem(ViewGroup container, int position,
					Object object) {
				// TODO Auto-generated method stub
				container.removeView(viewList.get(position));
			}
			
			@Override
			//將當前檢視新增到container中，並返回當前View
			public Object instantiateItem(ViewGroup container, int position) {
				// TODO Auto-generated method stub
				container.addView(viewList.get(position));
				
				
				return viewList.get(position);
			}
		};
		
		
		viewPager.setAdapter(pagerAdapter);
		
    }
 
 
}

Android 開發 (佈局和動畫)

Android 開發 (佈局和動畫)

LinearLayout

屬性

RelaticeLayout(相對佈局)

常見屬性

根據父容器定位

根據兄弟元件定位

同用屬性

margin 設定元件與父容器的邊距

padding 設定元件內部元素的邊距

FrameLayout(幀佈局)

常見屬性

TableLayout(表格佈局)

常用屬性

子控制元件設定屬性

GridLayout(網格佈局)

常用屬性

子控制元件屬性

ConstraintLayout(約束佈局)

ListView

使用預設的介面卡

動畫

幀動畫

補間動畫

在res目錄下建立anim目錄

平移

縮放

旋轉

漸變

組合動畫

動畫監聽

屬性動畫

屬性動畫和補間動畫的區別

建立定義屬性動畫，有兩種方式

屬性

屬性動畫 API

Evaluator ，用來控制屬性動畫如何計算屬性值。

ViewPager

在主檔案中 寫入

在layout中建立多個 滑動頁面 (示例)

MainActivity 類

相關推薦

在主檔案中寫入

在layout中建立多個滑動頁面 (示例)