[アンドロイド] Android用データベース - P2作成インターフェース

4月 28, 2017 nguyenvanquan7826 TUTデータベースアンドロイド 5 回答

以前で [アンドロイド] データベースtrongのアンドロイド - P1タオデータベース 私は、データベースを作成することを案内しております. この記事で私がご案内します スタイル材料設計のアプリのクリエイター.

注意:
私は英語で記述します。このシリーズのスクリプト. しかし、それはあなたが簡単に従いますので、「ベトナムから翻訳 "私の英語のライティングスタイルがあります.
ここに: Androidのスタジオ 1.2.2
AndroidのSDK 5.1.1
ミンSDK: 4.0 (アンドロイド 4.0 上記のアプリを使用します)
しかし、あなたは絶対にEclipseと下Android上で行うことができます

彼のアプリケーションでRecyclerViewを使用します, CardView. それについて明確でない場合は、さらに多くをお読みください:
アンドロイドでRecyclerView
アンドロイドでCardView

ステップ 1: アプリケーションの設定

ここではいくつかの構成では、アプリケーションを作成するために必要です.

まず第一に、私たちは、ファイル内のアプリケーションを構成する必要があります build.gradle 使用されます サポート設計ライブラリ, recyclerview, cardview 一部の依存関係にあります

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.+'
}

次のファイルの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>

我々は持っています 2 アクティビティ, ノートのリストが含まれています1 MainActivity, 一つはノートを起草するNoteActivityです.

あなたは、アプリのテーマである気づきました @スタイル/ AppTheme, あなたがファイルを開きます RES /値/ style.xml テーマ素材にテーマを編集.

<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>

あなたは私たちが持っている気づいています 1 スタイルLà AppCompatAlertDialogStyle ノートを削除するための時間、テーマダイアログは削除するか否かを尋ねる画面が表示されます.

また、ファイルを持っている必要があります string.xmlを指定 と colors.xml (で RES /値/) アプリケーションのための文字列と色を含むように. ない場合は、新しいをクリックして選択します … ファイルを作成するには.

<?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>

また、我々はまだそれらを必要ic_add, ic_save, ic_delete, アプリのic_launcher, と非常に簡単に、我々は作成してで検索することができます Androidの資産スタジオ または参照してください。 Androidの資産スタジオでアイコンを作成するための指示 あなたは明らかにされていない場合.

私たちが行っていることを業務アプリケーションの設定.

ステップ 2: インタフェースデザイン

メインacitivityを設計

最初activity_mainれます, を含みます RecyclerView ノートのリストが含まれています, と 1 アクションボタンをフロート ノートを作ります.

activity_main

<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>

FloatingActionButton必須の作成時に気づいています アプリ:境界線の幅=”0DP” そうしないと、マシンはいくつかある広場ではなく、丸が表示されます.

FloatingActionButtonの色です colorAccent style.xmlで定義されたテーマファイル. また、背景を設定することにより、それを変更することができます.

リストのデザインアイテム

次に、我々はのためのスキンを作成する必要があります 1 リスト内の項目. それは含まれています 2 タイトルと内容ライン (タイトルとメモの内容). Chúng sẽ được đặt trong CardView để có giao diện đẹp hơn 🙂

item_note

<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″ と アンドロイド:楕円=”より” 唯一の各項目が役立ちます 1 タイトル行と 1 ラインコンテンツ. タイトルや内容なら、それは長く、余分なスペースを削減します 3 背後にドット.

我々は、ファイルを作成する必要があります backgroud_item_note.xml で RES /描画可能/ アイテム犬の背景. クリックしたときにクリックしない場合には、アイテムの背景色を可能にします.

<?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>

インタフェース設計製図ノート

最後に、私たちはメモを書くときにインターフェースを設計する必要があります. インターフェイスが含まれます 2 タイトルおよびコンテンツののEditText.

activity_note.xml

<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>

また、我々はまた、持っています 2 削除し、メニューを保存したファイルのために設計されています 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>

ある程度 2 ご案内するために作成し、Javaインタフェースの完全さを符号化するこれだけでは、常にそのようにJavaコードの一部は、部分的にランデブーしますここに来ているように見えるだけでなく、長期的にも少し疲れて手 3 NHE.

チュートリアルで行われた投稿 データベースtrongのアンドロイド によって nguyenvanquan7826