[アンドロイド] Database trong Android – P2 Tạo giao diện
Trong phần trước [アンドロイド] Database trong Android – P1 Tạo database mình đã hướng dẫn các bạn tạo Database. Bài này mình sẽ hướng dẫn các bạn tạo giao diện của app theo phong cách Material Design.
Lưu ý:
Toàn bộ code trong loạt bài này mình sẽ viết bằng tiếng Anh. Tuy nhiên thì tiếng anh này mình viết theo kiểu “dịch từ tiếng Việt” nên các bạn sẽ dễ dàng theo dõi.
ここに: Androidのスタジオ 1.2.2
AndroidのSDK 5.1.1
ミンSDK: 4.0 (アンドロイド 4.0 trở lên sẽ dùng được ứng dụng)
Tuy nhiên các bạn hoàn toàn có thể làm trên Eclipse và android bản thấp hơn
Nội dung
Trong ứng dụng mình sẽ sử dụng RecyclerView, CardView. Các bạn nên đọc thêm nếu chưa rõ về nó:
アンドロイドでRecyclerView
アンドロイドでCardView
Bước 1: Cấu hình ứng dụng
Dưới đây là một số cầu hình cần thiết cho việc tạo ứng dụng.
Trước hết chúng ta cần cấu hình ứng dụng trong file build.gradle để có thể dùng サポート設計ライブラリ, recyclerview, cardview ở phần dependencies
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
compile 'com.android.support:design:22.2.0'
compile 'com.android.support:recyclerview-v7:21.0.+'
compile 'com.android.support:cardview-v7:21.0.+'
}
Tiếp theo là file AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="cachhoc.net.tut.demodatabase" >
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme" >
<activity
android:name=".MainActivity"
android:label="@string/app_name" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity
android:name=".NoteActivity"
android:label="@string/title_activity_note" >
</activity>
</application>
</manifest>
Chúng ta có 2 アクティビティ, một là MainActivity chứa danh sách các note, một là NoteActivity để soạn thảo note.
Các bạn để ý vào theme của ứng dụng là @スタイル/ AppTheme, các bạn mở file RES /値/ style.xml và chỉnh sửa theme để có Material theme.
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light">
<item name="colorPrimary">@color/primary</item>
<item name="android:textColor">@color/text_primary</item>
<item name="colorAccent">@color/primary</item>
</style>
<style name="AppCompatAlertDialogStyle" parent="Theme.AppCompat.Light.Dialog.Alert">
<item name="colorAccent">@color/primary</item>
<item name="android:textColorPrimary">@color/text_primary</item>
<item name="android:background">@color/white</item>
</style>
</resources>
Các bạn để ý chúng ta có 1 style là AppCompatAlertDialogStyle dùng cho theme dialog lúc xóa note thì hiện lên hỏi có xóa hay không.
Chúng ta cũng cần có các file string.xmlを指定 và colors.xml (nằm trong RES /値/) để chứa chuỗi và màu cho ứng dụng. Nếu chưa có thì các bạn click chuột phải chọn new … để tạo thêm file.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="primary">#4CAF50</color>
<color name="text_primary">#000000</color>
<color name="primary_dark">#388E3C</color>
<color name="accent">#FF4081</color>
<color name="white">#FFFFFF</color>
<color name="color_item_press">#81C784</color>
</resources>
<resources>
<string name="app_name">My Note</string>
<string name="hello_world">Hello world!</string>
<string name="action_settings">Settings</string>
<string name="add">Add</string>
<string name="delete">Delete</string>
<string name="save">Save</string>
<string name="yes">Yes</string>
<string name="no">No</string>
<!-- -->
<string name="title_note">Title note</string>
<string name="content">Content</string>
<string name="title_activity_note">Create Note</string>
</resources>
Ngoài ra chúng ta còn cần các icon ic_add, ic_save, ic_delete, ic_launcher cho ứng dụng, và rất dễ dàng chúng ta có thể tạo và tìm kiếm tại Androidの資産スタジオ hoặc xem hướng dẫn tạo icon tại Android Asset Studio nếu bạn chưa rõ.
Như vậy là công việc cấu hình ứng dụng của chúng ta đã xong.
Bước 2: Thiết kế giao diện
Thiết kế acitivity main
Trước tiên là activity_main, gồm một RecyclerView chứa danh sách note, và 1 アクションボタンをフロート để tạo note.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:id="@+id/rv_note"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_gravity="center"
android:layout_marginBottom="16dp"
android:layout_marginRight="16dp"
android:src="@drawable/ic_add"
app:borderWidth="0dp"
app:elevation="6dp"
app:pressedTranslationZ="12dp" />
</RelativeLayout>
Các bạn chú ý khi tạo FloatingActionButton cần có アプリ:境界線の幅=”0DP” nếu không trong một số máy sẽ hiển thị là hình vuông chú không phải hình tròn.
Màu của FloatingActionButton là colorAccent trong theme đã định nghĩa ở file style.xml. Bạn cũng có thể thay đổi nó bằng cách đặt background.
Thiết kế item trong danh sách
Tiếp theo chúng ta cần tạo giao diện cho 1 item trong danh sách. Nó sẽ gồm 2 dòng là title và content (tiêu đề và nội dung của ghi chú). Chúng sẽ được đặt trong CardView để có giao diện đẹp hơn 🙂
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="@+id/card_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_margin="3dp"
card_view:cardCornerRadius="1dp">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="@+id/item_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/backgroud_item_note"
android:gravity="center_vertical"
android:orientation="vertical"
android:padding="5dp">
<TextView
android:id="@+id/tv_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="end"
android:gravity="center_vertical"
android:lines="1"
android:text="@string/title_note"
android:textSize="18sp" />
<TextView
android:id="@+id/tv_content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="end"
android:gravity="center_vertical"
android:lines="1"
android:text="@string/content"
android:textSize="13sp" />
</LinearLayout>
</android.support.v7.widget.CardView>
アンドロイド:ライン=”1″ và アンドロイド:楕円=”より” sẽ giúp mỗi item chỉ có 1 dòng title và 1 dòng content. Nếu title hoặc content dài thì sẽ cắt bớt và thêm dấu 3 chấm đằng sau.
Chúng ta cần tạo file backgroud_item_note.xml で RES /描画可能/ để làm background chó item. Nó cho phép tạo màu nền của item khi click và khi không click.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@color/color_item_press" android:state_pressed="true"/>
<item android:drawable="@color/white" android:state_pressed="false"/>
</selector>
Thiết kế giao diện soạn thảo note
Cuối cùng chúng ta cần thiết kế giao diện khi viết ghi chú. Giao diện sẽ gồm 2 EditText cho title và content.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white"
android:orientation="vertical">
<EditText
android:id="@+id/edit_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/white"
android:gravity="center_vertical"
android:hint="@string/title_note"
android:padding="5dp"
android:textSize="18sp"
android:textStyle="bold" />
<EditText
android:id="@+id/edit_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white"
android:gravity="start"
android:hint="@string/content"
android:padding="5dp"
android:textSize="18sp" />
</LinearLayout>
Ngoài ra chúng ta còn có 2 menu là delete và save được thiết kế trong file RES /メニュー/ menu_note.xml
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="@+id/menu_delete"
android:icon="@drawable/ic_delete"
android:orderInCategory="100"
android:title="@string/delete"
app:showAsAction="always" />
<item
android:id="@+id/menu_save"
android:icon="@drawable/ic_save"
android:orderInCategory="100"
android:title="@string/save"
app:showAsAction="always" />
</menu>
Trong phần 2 này mình định hướng dẫn các bạn tạo giao diện và viết code java hoàn thiện luôn nhưng có vẻ đến đây cũng khá dài dài mà cũng thấy hơi mỏi tay vậy nên phần code java sẽ hẹn các bạn ở phần 3 nhé.
Bài viết được thực hiện trong loạt bài hướng dẫn データベースtrongのアンドロイド bởi nguyenvanquan7826
anh cho e hỏi là làm sao để cho floatingactionbutton vào trong 1 フラグメント ? コードtrongフラグメント
パブリッククラスAddNoteFragmentはフラグメントを拡張{
@Override
パブリックビューonCreateView(LayoutInflaterインフレータ, ViewGroupコンテナ, バンドルsavedInstanceState) {
ビューviewAddNote = inflater.inflate(R.layout.fragment_main_add_note, ヌル);
viewAddNoteを返します ;
}
}
Lỗi :
android.view.InflateException: バイナリXMLファイル行 #11: android.view.LayoutInflater.createViewでエラー膨張クラスandroid.support.design.widget.FloatingActionButton(LayoutInflater.java:633)
Bạn cho code xml của FAB vào fragment tương ứng là đk mà.
e để đúng rồi mà chưa được .. anh có thể teamview cho e được không thanh anh ….
Bạn liên lạc fb/nguyenvanquan7826 nhé
Nếu vẫn chưa đk thì bạn liên lạc fb.com/nguyenvanquan7826 nhé.