[安卓] JSON仲机器人 – 部分 3: 接口设计的旧情人
大家好, 在 2 幸运的是，我们有 tìm hiểu JSon 如何 xuất JSon từ Database bằng Php, 一切都很好. 并且部分 3 这项, chúng ta sẽ đi thiết kế giao diện cho Old Lover – 昔日的恋人. 😉
Ứng dụng được thực hiện trên Android studio 1.3
compileSdkVersion 22
buildToolsVersion “22.0.1”
的minSdkVersion 14
targetSdkVersion 22
让我们来看看旧情人的视频可视化界面的应用程序.
配置和必需品
首先，我们将做些准备build.gradle, 串, 绘制, 颜色, 风格,… 当然，在做的过程中是使自己更下降到无处，但是当批示，我给你所有的提前，以避免故障或难以操作.
配置build.gradle和AndroidManifest
文件build.gradle
apply plugin: 'com.android.application'
android {
compileSdkVersion 22
buildToolsVersion "22.0.1"
defaultConfig {
applicationId "cachhoc.net.demojson"
minSdkVersion 14
targetSdkVersion 22
versionCode 1
versionName "1.0"
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}
}
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
compile 'com.android.support:design:22.2.0'
compile 'com.android.support:recyclerview-v7:22.0.+'
compile 'com.android.support:cardview-v7:22.0.+'
compile 'com.loopj.android:android-async-http:1.4.8'
compile 'com.wdullaer:materialdatetimepicker:1.4.2'
}
通知你已经采取了一些库，比如
- android.support:设计 服务设计的材料, 工具栏, FloadActionButton,…
-
recyclerview和cardview 作为校长名单
-
com.loopj.android:Android的异步HTTP 库使Android和网页之间推或抢JSON操纵. 你可以在这里看到更多的: https://github.com/loopj/android-async-http
-
com.wdullaer:materialdatetimepicker 日期时间选择器用作视频, 另见 https://github.com/wdullaer/MaterialDateTimePicker
文件的AndroidManifest.xml
在最重要的，这是我们授予访问互联网的应用.
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="cachhoc.net.demojson" >
<uses-permission android:name="android.permission.INTERNET" />
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/old_lover"
android:theme="@style/AppTheme" >
<activity
android:name=".LoginActivity"
android:label="@string/old_lover"
android:windowSoftInputMode="adjustPan" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity
android:name=".MainActivity"
android:label="@string/old_lover" />
<activity
android:name=".RegisterActivity"
android:label="@string/title_activity_register" >
</activity>
<activity
android:name=".AddLoverActivity"
android:label="@string/title_activity_add_lover" >
</activity>
</application>
</manifest>
肤色, 串, 作风
文件RES /价值/ color.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!--Indigo 500-->
<color name="primary">#3F51B5</color>
<!--Indigo 700-->
<color name="primary_dark">#303F9F</color>
<!--Pink 500-->
<color name="accent">#E91E63</color>
<color name="white">#FFFFFF</color>
<!-- for change color date picker-->
<color name="mdtp_accent_color">@color/primary</color>
<color name="mdtp_accent_color_dark">@color/primary_dark</color>
</resources>
文件RES /价值/ string.xml
他之所以能在string.xml没有Java代码，因为它提供了更高创建多语言应用程序向用户显示的字符串.
<resources>
<string name="app_name">DemoJson</string>
<string name="refresh">Refresh</string>
<string name="name">Name Lover</string>
<string name="phone">Phone</string>
<string name="begin_date">Begin date</string>
<string name="end_date">End date</string>
<string name="nick_name">Nick name</string>
<string name="password">Password</string>
<string name="re_password">Re Password</string>
<string name="logout">Logout</string>
<string name="login">Login</string>
<string name="remember_me">Remember me</string>
<string name="login_success">Login success</string>
<string name="login_fail">Login fail</string>
<string name="register">Register</string>
<string name="reset">Reset</string>
<string name="register_success">Register success</string>
<string name="register_fail">Nick already exists</string>
<string name="add_success">Add success</string>
<string name="add_fail">Add fail</string>
<string name="wait">Please wait…</string>
<string name="add">Add</string>
<string name="no_lover">You not have old lover</string>
<string name="back_to_exit">Please click BACK again to exit</string>
<string name="enter_nick">Please enter your nick name</string>
<string name="enter_pass">Please enter your password</string>
<string name="enter_repass">Please re enter your password</string>
<string name="pass_not_match">Password not match</string>
<string name="old_lover">Old Lover</string>
<string name="title_activity_login">Login</string>
<string name="title_activity_register">Register</string>
<string name="title_activity_add_lover">Add Old Lover</string>
</resources>
文件RES /价值/ style.xml
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">@color/primary</item>
<item name="colorPrimaryDark">@color/primary_dark</item>
<item name="colorAccent">@color/accent</item>
<item name="windowActionBar">false</item>
<item name="windowActionBarOverlay">true</item>
<item name="windowNoTitle">true</item>
<item name="android:windowBackground">@color/background_material_light</item>
</style>
<style name="MyAppDialog" parent="Theme.AppCompat.Light.Dialog">
<item name="colorPrimary">@color/primary</item>
<item name="colorPrimaryDark">@color/primary_dark</item>
<item name="colorAccent">@color/accent</item>
</style>
</resources>
图标
您可以创建使用图标 AndroidAssetStudio 或者你可以下载你的图标集 这里.
做完必需品.
活动的接口设计
正如你所看到的, 我们将有 4 主要活动: 登录 (注册), 注册 (注册), 列表旧情人 (名单前男友) 最后 (加) 更多新.
欲了解更多活动您在一个单一的解决方案做的就是右键单击java包布局的文件夹，或选择新 - >活动 - >黑活动. 同时，XML文件格式, Java和清单都.
在RES /布局文件
工具栏，而不是动作条
你有没有在上面的文件style.xml发现, 我已经设置了主题为 Theme.AppCompat.Light.NoActionBar 这样的活性不会有动作条. 相反，我会用工具栏中的包 android.support.v7.widget 服务接口设计材料.
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
活动登录
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="@layout/toolbar" />
<ImageView
android:id="@+id/imageView"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_below="@+id/toolbar"
android:layout_centerHorizontal="true"
android:layout_gravity="center"
android:src="@drawable/ic_launch" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="@+id/imageView"
android:orientation="vertical"
android:padding="10dp">
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="@+id/edit_nick"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/nick_name"
android:textColor="@color/accent" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="@+id/edit_pass"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/password"
android:inputType="textPassword"
android:textColor="@color/accent" />
</android.support.design.widget.TextInputLayout>
<CheckBox
android:id="@+id/cb_remember"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/remember_me" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="10dp">
<Button
android:id="@+id/btn_login"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:foreground="?android:attr/selectableItemBackground"
android:text="@string/login" />
<Button
android:id="@+id/btn_register"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:foreground="?android:attr/selectableItemBackground"
android:text="@string/register" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
你注意到我用 的EditText 在 android.support.design.widget.TextInputLayout, 这将帮助我们创建和后肢后的EditText会在自动运行起来 1 吊牌当它是forcus在视频.
活动注册
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="@layout/toolbar" />
<ImageView
android:id="@+id/imageView"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_below="@+id/toolbar"
android:layout_centerHorizontal="true"
android:layout_gravity="center"
android:src="@drawable/ic_launch" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="@+id/imageView"
android:orientation="vertical"
android:padding="10dp">
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="@+id/edit_nick"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/nick_name"
android:textColor="@color/accent" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="@+id/edit_pass"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/password"
android:inputType="textPassword"
android:textColor="@color/accent" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="@+id/edit_re_pass"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/re_password"
android:inputType="textPassword"
android:textColor="@color/accent" />
</android.support.design.widget.TextInputLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:orientation="horizontal">
<Button
android:id="@+id/btn_register"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:foreground="?android:attr/selectableItemBackground"
android:text="@string/register" />
<Button
android:id="@+id/btn_reset"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:foreground="?android:attr/selectableItemBackground"
android:text="@string/reset" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
活动添加情人
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="@layout/toolbar" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="@+id/toolbar"
android:orientation="vertical"
android:padding="10dp">
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="@+id/edit_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/name"
android:textColor="@color/accent" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="@+id/edit_phone"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/phone"
android:textColor="@color/accent" />
</android.support.design.widget.TextInputLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:orientation="horizontal">
<Button
android:id="@+id/btn_begin_date"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:foreground="?android:attr/selectableItemBackground"
android:text="@string/begin_date" />
<Button
android:id="@+id/btn_end_date"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:foreground="?android:attr/selectableItemBackground"
android:text="@string/end_date" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:orientation="horizontal">
<Button
android:id="@+id/btn_add"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:foreground="?android:attr/selectableItemBackground"
android:text="@string/add" />
<Button
android:id="@+id/btn_reset"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:foreground="?android:attr/selectableItemBackground"
android:text="@string/reset" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
活动主 – 列表旧情人
<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">
<include layout="@layout/toolbar" />
<LinearLayout
android:id="@+id/layout_progress"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/toolbar"
android:gravity="center"
android:orientation="vertical">
<ProgressBar
android:id="@+id/progress"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/tv_notify"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center" />
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:id="@+id/rv_lover"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@+id/layout_progress"
android:scrollbars="vertical" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab_add"
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>
在此活动中，我们有 1 布局Là layout_progress, 它包含 1 进度条显示 “盘曲” 从网络加载数据时, 1 TextView的错误，如果错误信息. 数据加载完成后，, 否则会被隐藏故障.
此外，在这种活动，我们所需要的 项目 为RecyclerView和 2 菜单 logut 和 刷新
文件RES /布局/ item.xml
<?xml version="1.0" encoding="utf-8"?>
<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/item_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="5dp"
android:foreground="?android:attr/selectableItemBackground"
android:orientation="vertical"
card_view:cardCornerRadius="2dp"
card_view:cardElevation="@dimen/cardview_default_elevation">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="?attr/listPreferredItemHeight"
android:gravity="center_vertical"
android:orientation="vertical"
android:paddingBottom="8dp"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="8dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="@+id/tv_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="@+id/tv_begin_date"
android:text="@string/name"
android:textColor="@color/primary_text_default_material_light"
android:textSize="@dimen/abc_text_size_subhead_material" />
<TextView
android:id="@+id/tv_begin_date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:paddingTop="3dp"
android:text="@string/begin_date"
android:textColor="@color/secondary_text_default_material_light"
android:textSize="@dimen/abc_text_size_caption_material" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="@+id/tv_phone"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="@+id/tv_end_date"
android:paddingTop="3dp"
android:text="@string/phone"
android:textColor="@color/secondary_text_default_material_light"
android:textSize="@dimen/abc_text_size_caption_material" />
<TextView
android:id="@+id/tv_end_date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:paddingTop="3dp"
android:text="@string/end_date"
android:textColor="@color/secondary_text_default_material_light"
android:textSize="@dimen/abc_text_size_caption_material" />
</RelativeLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
文件RES /菜单/ menu_main.xml
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".MainActivity">
<item
android:id="@+id/action_logout"
android:icon="@drawable/ic_logout"
android:orderInCategory="100"
android:title="@string/logout"
app:showAsAction="always" />
<item
android:id="@+id/action_refresh"
android:icon="@drawable/ic_refresh"
android:orderInCategory="100"
android:title="@string/refresh"
app:showAsAction="always" />
</menu>
因此，在界面设计完成. 在接下来的章节中，我们会处理完整的Java应用程序代码.
在本教程的帖子 JSON仲机器人 由 nguyenvanquan7826
mấy chỗ github thì down thư mục nào thế c hay down cả cái file zip của n về thế ?
的, mấy chỗ đấy để các bạn đọc thêm nếu cần thôi….
http://stackoverflow.com/questions/20377591/how-to-use-a-library-project-in-android-studio/20418060#20418060
để sử dụng được thẻ này thì cần impport thư viện nào vậy anh? 我用 (android studio)
你看他的第一篇文章的配置说明我得到了你
要使用此卡 (android.support.design.widget.TextInputLayout) 应该impport先生库? 我用Android的工作室
你看他的第一篇文章的配置说明我得到了你