Android入門(5)| 高階控制元件

摘要： 在前面我們學習了Android中的最基本的控制元件，接下來我們來一起學習幾個更加高階的控制元件吧。 本節目錄 1.ListView 滾動控制元件 控制元件ListView的主要功能就是將一些我們需要展示的資訊通過滾動的方式來展出，使用者只需要...

在前面我們學習了Android中的最基本的控制元件，接下來我們來一起學習幾個更加高階的控制元件吧。

1.ListView 滾動控制元件

控制元件ListView的主要功能就是將一些我們需要展示的資訊通過滾動的方式來展出，使用者只需要用手指在APP上滾動即可看到不同的資訊。在一般的APP當中都會有這樣的功能。

同樣先建立專案，然後在佈局上新增LiseView控制元件：

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

接著我們修改主活動的程式碼：

package com.example.yzbkaka.myapplication;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.ListView;

public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
String[] data = {"1","2","3","4","5","6","7","8","9","10"};//先定義一個字串陣列充當資訊
ListView listView = (ListView)findViewById(R.id.list_view);
ArrayAdapter<String> myAdapter = new ArrayAdapter<String>(MainActivity.this
,android.R.layout.simple_list_item_1,data);//為data定義一個介面卡
listView.setAdapter(myAdapter);//啟動介面卡
}
}

我們先在這裡新建了一個String型別的陣列，接著是使用介面卡來將陣列中的內容傳到LIstView中，建立介面卡時的建構函式需要傳入三個引數，第一個是Context，這裡就傳入MainActivity就可以，第二個是要傳入子項佈局的id，這裡我們使用AS中預設的即可，最後一個引數就是我們要傳入的資料了。最後我們使用setAdapter()的方法來啟動介面卡即可。

ListView中的點選事件所使用的方法也是和其他的控制元件不太一樣，它主要使用的是setItemClickListener()的方法來進行，修改主程式碼：

package com.example.yzbkaka.myapplication;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final String[] data = {"1","2","3","4","5","6","7","8","9","10"};
ListView listView = (ListView)findViewById(R.id.list_view);
ArrayAdapter<String> myAdapter = new ArrayAdapter<String>(MainActivity.this
,android.R.layout.simple_list_item_1,data);
listView.setAdapter(myAdapter);
listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {//設定監聽
@Override
public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
Toast.makeText(MainActivity.this, "you click it", Toast.LENGTH_SHORT).show(); //具體操作
}
});
}
}

這裡就是使用的setOnItemClickListener()的方法來為ListView設定了一個監聽，每當我們點選LIstView中任何一個時就會回撥onItemClick()方法，之後我們就可以在它裡面來設定具體的操作了。

2.RecyclerView 更強大的滾動控制元件

RecyclerView是相對於ListView更加強大和方便的滾動控制元件，RecyclerView不僅能夠實現上下滾動的功能，還能夠實現左右滾動、瀑布模式等等更加美觀的展現方式。

同樣還是建立一個空專案。由於RecyclerView不是Android內建的控制元件，因此我們需要在庫中新增依賴，開啟app—build.gradle，找到 dependencies 的閉包，在裡面新增一行依賴：

implementation 'com.android.support:recyclerview-v7:27.1.1'

接著我們在佈局裡面將RecyclerView新增進去：

<android.support.v7.widget.RecyclerView
android:id="@+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v7.widget.RecyclerView>

之後我們就在主程式碼中將資料傳輸到RecyclerView中：

package com.example.yzbkaka.myapplication;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import java.util.ArrayList;



public class MainActivity extends AppCompatActivity {
ArrayList<String> myList = new ArrayList<>();//新建立的測試資訊list

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
RecyclerView recyclerView = (RecyclerView)findViewById(R.id.recycler_view);
RecyclerAdapter adapter = new RecyclerAdapter(this,myList);//建立介面卡

LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this);//建立排列的方式
recyclerView.setLayoutManager(linearLayoutManager);//設定排列的方式
recyclerView.setAdapter(adapter);//啟動介面卡

}
}

使用RecyclerView同樣需要介面卡，我們這裡使用的是自己建立的RecyclerAdapter，接著是建立佈局排列方式的LinearLayoutManager物件，然後使用setLayoutManager()的方法來將佈局載入進去，最後是啟動介面卡。

下面我們來建立RecyclerAdapter，新建類，然後新增程式碼：

package com.example.yzbkaka.myapplication;

import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;


import java.util.ArrayList;


public class RecyclerAdapter extends RecyclerView.Adapter<RecyclerAdapter.MyHolder> {
Context context;
ArrayList<String> list;

public RecyclerAdapter(Context context,ArrayList<String> list){
this.context = context;
this.list = list;
}

public class MyHolder extends RecyclerView.ViewHolder{
TextView textView;

public MyHolder(View itemView){
super(itemView);
textView = (TextView)itemView.findViewById(R.id.text_view);
}
}

@Override
public MyHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.activity_main,parent,false
);
MyHolder myHolder = new MyHolder(view);
return myHolder;
}

@Override
public void onBindViewHolder(MyHolder holder, int position) {
String str = list.get(position);
holder.textView.setText(str);
}

@Override
public int getItemCount() {
return list.size();
}
}

之後執行我們就可以實現和ListView一樣的效果了。當然，RecyclerView之所以強大，不僅僅是可以實現ListView，還能夠做到ListView所不能實現的效果，我們修改主程式碼：

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
RecyclerView recyclerView = (RecyclerView)findViewById(R.id.recycler_view);
RecyclerAdapter adapter = new RecyclerAdapter(this,myList);

LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this);
linearLayoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);//新增這一行
recyclerView.setLayoutManager(linearLayoutManager);
recyclerView.setAdapter(adapter);
}
}

可以看到我們在這添加了一行 linearLayoutManager.setOrientation(LinearLayoutManager.HORIZONTAL); ，它的含義就是讓RecyclerView中的內容呈水平排列來展現出來。

3.建立自定義控制元件

我們先來看一下控制元件的佈局的繼承結構圖：

可以看到我們所用的控制元件都是直接或者間接繼承自View的，而所有的佈局都是繼承自ViewGroup的。View是一種最基本的Android控制元件，它能夠在螢幕上的劃定一塊區域並且能夠響應這塊區域的各種事件，所以我們使用的各種控制元件其實就是在View的基礎之上又新增各自的功能；ViewGroup也是同樣的道理。知道了這些，我們就可以利用他們的原理來自己建立控制元件。

這裡我們建立一個APP裡面的工作列控制元件，它包括返回、顯示資訊和退出的功能。還是先建立一個空專案，然後新建一個佈局，新增控制元件：

<Button
android:id="@+id/button_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="5dp"
android:text="Back" />

<TextView
android:id="@+id/text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:layout_margin="5dp"
android:text="Title Text"/>

<Button
android:id="@+id/button_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="5dp"
android:text="Exit" />

在這裡我們是建立了2個按鈕和1個標題欄，它們的排列方式就是水平排列，這裡出現的新的控制元件屬性 android:layout_margin 的含義是指定控制元件在上下左右方向上偏移的距離，這裡我們制定為5dp就好。

由於我們設定的佈局是一個工作列，所以在每一個活動的佈局當中它都應該出現，但是如果在每一個活動的佈局中都寫一遍這樣的程式碼未免效率低下，因此，我們可以將工作列的佈局直接用一行程式碼新增進去，在主活動的佈局中新增：

<include layout="@layout/title"/>

僅僅使用這一行程式碼，我們就可以將工作列的佈局新增進去，之後的所有活動的佈局我們都可以這樣來新增。

最後就是要將系統自帶的工作列給去除掉，我們在主活動中新增程式碼：

package com.example.yzbkaka.myuiapplication;

import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ActionBar actionBar = getSupportActionBar();//先獲得ActionBar物件
if(actionBar != null){//如果actionBar不是空的
actionBar.hide();//將actionBar隱藏
}
}
}

在這裡我們使用的是getSupportActionBar()的方法來得到ActionBar物件，然後使用if來判斷，如果不為空，則使用hide的方法來隱藏。

之後我們就需要對工作列的控制元件來新增具體的操作活動了，同樣，如果我們在每一個活動中都寫上具體操作的程式碼是很浪費時間的。所以在這裡我們就可以將工作列變為一個控制元件，而這個控制元件就需要我們來自己創造了。新建一個TitleLayout：

package com.example.yzbkaka.myuiapplication;

import android.content.Context;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.Toast;


public class TitleLayout extends LinearLayout {
public TitleLayout(final Context context, AttributeSet attributeSet){
super(context,attributeSet);
LayoutInflater.from(context).inflate( R.layout.title,this);
Button back = (Button)findViewById(R.id.button_1);
TextView title = (TextView)findViewById(R.id.text_view);
Button exit = (Button)findViewById(R.id.button_2);

back.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View view) {
Toast.makeText(getContext(),"you click back",Toast.LENGTH_LONG).show();
}
});

exit.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View view) {
Toast.makeText(getContext(), "you click exit", Toast.LENGTH_SHORT).show();
}
});
}
}

TitleLayout繼承自LinearLayout，而它的建構函式需要傳入2個引數。接著是使用LayoutInflater的from()方法來建立一個LayoutInflater的物件，最後對該物件使用inflate()方法來載入這個佈局檔案，inflate()方法需要的兩個引數分別是需要載入的佈局和為該佈局新增的父佈局，在這裡具體就是指title這個佈局以及TitleLayout。之後就是為這裡面的控制元件來新增操作了。

最後我們就可以將這個自定義控制元件放到佈局裡面：

<com.example.yzbkaka.myuiapplication.TitleLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"></com.example.yzbkaka.myuiapplication.TitleLayout>

就這樣，我們就創造了一個我們自己的工作列控制元件。