Android開發之簡單備忘錄
超常見控制元件ListView
- 大家在日常使用各種app時,有沒有注意到,你會常常向上滑動螢幕來瀏覽下面的資訊。例如滑動QQ看訊息列表,翻閱微博最新訊息等等。
- 那資料是如何顯示到ListView裡面的呢?(即呈現在使用者介面上)
1. 儲存資料可以用陣列或者List集合。
2. 使用ArrayAdapter(陣列介面卡)作為橋樑,將資料繫結在ArrayAdapter上面。
3. 通過介面卡將資料更新到ListView上進行展示。 - 先實現一個簡單的例子:展示大量水果名
//主活動程式碼MainActivity.java public class MainActivity extends AppCompatActivity { String[] fruits = {"Apple", "Banana", "Orange", "Watermelon", "Pear", "Grape", "Pineapple", "Cheery", "Mango", "Apple", "Banana", "Orange", "Watermelon", "Pear"}; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ArrayAdapter<String> adapter = new ArrayAdapter<>(MainActivity.this, android.R.layout.simple_list_item_1, fruits); ListView listView = (ListView)findViewById(R.id.list_view); listView.setAdapter(adapter);//關聯介面卡 } } //佈局檔案activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_height="match_parent" android:layout_width="match_parent"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="水果列表展示" android:gravity="center_horizontal" android:textSize="24sp" /> <ListView android:id="@+id/list_view" android:layout_width="match_parent" android:layout_height="match_parent"> </ListView> </LinearLayout>
-
介面呈現如下:
簡單ListView實現
-
補充:
-
ArrayAdapter<String> adapter = new ArrayAdapter<>(MainActivity.this, android.R.layout.simple_list_item_1, fruits);
介面卡有很多種,這裡我們使用ArrayAdapter來實現, 注意ArrayAdapter的建構函式中依次傳入當前上下文(就是當前的Activity),ListView子佈局的id,需要適配的資料。 這裡的simple_list_item_1是Android內建的佈局檔案,裡面只有一個TextView,用於顯示一段簡單的文字。 -
ListView listView = (ListView)findViewById(R.id.list_view);
建立ListView物件,通過findViewById()方法找到ListView的id名稱,使用(ListView)強制轉型。 -
listView.setAdapter(adapter);
呼叫ListView的setAdapter()方法,就構建好的介面卡物件傳進去,資料和ListView控制元件的聯絡就建立起來了。
實現簡單備忘錄
- 準備實現的功能:
- 一個提示輸入文字的控制元件,輸入準備新增的文字。
- 點選新增按鈕向ListView中新增輸入的文字。
- 使用ListView展示新增的資料。
-
按照要求,先實現整體佈局。使用LinearLayout線性佈局,分別使用TextView、EditView、Button、ListView控制元件實現大致框架。
佈局檔案程式碼如下:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_height="match_parent" android:layout_width="match_parent"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="請輸入備忘錄內容" android:gravity="center" android:textAlignment="center" android:textSize="24sp" /> <EditText android:id="@+id/edit" android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="編輯..."/> <Button android:id="@+id/button" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="新增到備忘錄"/> <ListView android:id="@+id/list_view" android:layout_width="match_parent" android:layout_height="match_parent"> </ListView> </LinearLayout>
-
實現效果:
大致框架
- 為Button物件設定一個監聽器,在編輯框輸入新增的文字,點選按鈕後新增到ListView控制元件。
主活動程式碼如下:
public class MainActivity extends AppCompatActivity{ EditText ed; Button button; ArrayAdapter<String> adapter; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); button = (Button)findViewById(R.id.button); ed = (EditText)findViewById(R.id.edit); adapter = new ArrayAdapter<String>(MainActivity.this, android.R.layout.simple_list_item_1); ListView listView = (ListView)findViewById(R.id.list_view); listView.setAdapter(adapter);//關聯介面卡 adapter.add("看電影"); adapter.add("聽歌"); adapter.add("看書"); adapter.add("吃飯"); adapter.add("散步"); button.setOnClickListener(new View.OnClickListener(){ @Override public void onClick(View view) { String add = ed.getText().toString(); adapter.add(add); } }); } }
- 補充:
- 細心的朋友會發現上面的程式碼裡並沒有傳入ArrayAdapter建構函式所需的第三個引數,而是採用adapter自帶的add()方法初始化了一些資料。
- 點選按鈕後,獲取新增的文字賦給String型變數add,再使用add()方法新增到ListView中實現整個功能。
-
實現效果如下(新增文字前):
新增文字前
-
新增文字後:
新增hello
Github地址
- 活動頁程式碼 ofollow,noindex">https://github.com/0xmxhnc/NoteDemo/blob/master/app/src/main/java/com/example/notedemo/MainActivity.java
- 佈局頁程式碼 https://github.com/0xmxhnc/NoteDemo/blob/master/app/src/main/res/layout/activity_main.xml