多くの教育UI開発、その知識では、実際の戦闘を見て時間です。私たちは大量のコンテンツの包括的な使用が以前より複雑でかなり美しいインタフェースを記述することを学んだします。この時間は、あなたは準備ができていますか?これは、偽のQQインターフェイスです。
新しいプロジェクトを作成します。名前付きDemo_TestOne。そして、activity_main.xmlログファイルには、次のコードを追加します。
<のLinearLayoutのxmlns:アンドロイド= "http://schemas.android.com/apk/res/android"
アンドロイド:layout_width = "match_parent"
アンドロイド:layout_height = "match_parent"
アンドロイド:オリエンテーション=「縦」>
アンドロイド:layout_width = "match_parent"
アンドロイド:layout_height = "60dp"
アンドロイド:ヒント=「ユーザー名を入力してください」
アンドロイド:ID = "@ + ID / L_NAME"
アンドロイド:MAXLINES = "2"
アンドロイド:背景= "描画可能/ et_bg @"
アンドロイド:layout_marginTop = "4DP"
アンドロイド:layout_marginLeft = "8DP"
アンドロイド:layout_marginRight = "8DP"
アンドロイド:drawableRight = "描画可能/キャンセル@"
アンドロイド:TEXTSIZE = "18dp" />
アンドロイド:layout_width = "match_parent"
アンドロイド:layout_height = "60dp"
アンドロイド:ヒント=「あなたのパスワードを入力してください」
アンドロイド:ID = "@ + ID / l_pwd"
アンドロイド:MAXLINES = "2"
アンドロイド:inputType = "textPassword"
アンドロイド:背景= "描画可能/ et_bg @"
アンドロイド:layout_marginTop = "4DP"
アンドロイド:layout_marginLeft = "8DP"
アンドロイド:layout_marginRight = "8DP"
アンドロイド:drawableRight = "描画可能/キャンセル@"
アンドロイド:TEXTSIZE = "18dp" />
アンドロイド:ID = "@ + ID / btn_login"
アンドロイド:layout_width = "match_parent"
アンドロイド:layout_height = "50dp"
アンドロイド:layout_gravity = "下"
アンドロイド:テキスト=「ログイン」
アンドロイド:textAllCaps = "false" に
アンドロイド:TEXTSIZE = "24dp"
アンドロイド:背景= "描画可能/ btn_bg @"
アンドロイド:layout_marginTop = "4DP"
アンドロイド:layout_marginLeft = "8DP"
アンドロイド:layout_marginRight = "8DP"
アンドロイド:の、textColor = "#のFFF" />
アンドロイド:layout_width = "match_parent"
アンドロイド:layout_height = "wrap_content">
アンドロイド:layout_width = "wrap_content"
アンドロイド:layout_height = "wrap_content"
アンドロイド:ID = "@ + ID /忘れ"
アンドロイド:テキスト=「パスワードを忘れた場合」
アンドロイド:の、textColor = "#1 E40A75A7"
アンドロイド:layout_marginLeft = "8DP"
アンドロイド:TEXTSIZE = "16dp" />
アンドロイド:layout_width = "match_parent"
アンドロイド:layout_height = "wrap_content"
アンドロイド:重力=「右」
アンドロイド:ID = "@ + ID /記号"
アンドロイド:テキスト=「ユーザー登録」
アンドロイド:の、textColor = "#1 E40A75A7"
アンドロイド:TEXTSIZE = "16dp"
アンドロイド:layout_marginRight = "8DP" />
</のLinearLayout>
このうち、のEditText(エディットボックス)はアンドロイドの内側に追加します。背景=「描画可能/ et_bg @」と内側アンドロイドボタン(ボタン)を追加:背景=「描画可能@ / btn_bgは、」描画可能リソースファイルの内側に配置されています。inputType =「textPassword」のEditTextパスワードタイプするために設けられている、すなわち、目に見えない入力:アンドロイドにおける第二のEditTextを追加します。エディットボックスがアンドロイドを追加します。drawableRight =「描画可能@ /キャンセル」空の右側に小さなアイコンを追加することです。
リソースファイルはet_bg.xml、あなたはそれを形作る百度に行くために何を意味するのかわからない場合は、これについて多くがあります:(以下のようにbtn_bg.xmlコードがあります。)
<形状のxmlns:アンドロイド= "http://schemas.android.com/apk/res/android"
アンドロイド:形状=「長方形」>
<コーナーアンドロイド:半径= "4DP" />
<パディングアンドロイド:トップ= "2DP"
アンドロイド:下= "2DP"
アンドロイド:左= "2DP"
アンドロイド:右= "2DP" />
<ストロークアンドロイド:色= "#1 BA817F7F" アンドロイド:幅= "4DP" />
</形状>
<形状のxmlns:アンドロイド= "http://schemas.android.com/apk/res/android"
アンドロイド:形状=「長方形」>
<コーナーアンドロイド:半径= "4DP" />
<固体アンドロイド:色= "#1 F31D7BC5" />
<パディングアンドロイド:トップ= "2DP"
アンドロイド:下= "2DP"
アンドロイド:左= "2DP"
アンドロイド:右= "2DP" />
</形状>
図面上、と述べました。
それは意味はありませんか?今でログイン、レジストラ(activity_sign.xml)も持っている必要があります。それを直接マップ上。
実際には、ログイン、登録、削除、次のパスワードを忘れた場合千万人など。パスワードが言うことはありません忘れました。QQは、モデル化された書き込みああ行くことができます。そして、ホーム・ページの問題があります。ホームactivity_index.xmlコードは次のとおりです。
<のLinearLayoutのxmlns:アンドロイド= "http://schemas.android.com/apk/res/android"
アンドロイド:layout_width = "match_parent"
アンドロイド:layout_height = "match_parent"
android:orientation="vertical">
<include layout="@layout/title"/>
android:layout_width="match_parent"
android:layout_height="50dp"
android:id="@+id/search"
android:text="搜索"
android:textSize="22dp"
android:background="@drawable/search_bg"
android:drawableLeft="@drawable/search"
android:paddingLeft="@android:dimen/thumbnail_width"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"/>
android:layout_width="match_parent"
android:layout_height="match_parent">
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:orientation="horizontal">
android:id="@+id/message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:drawableTop="@drawable/message"
android:gravity="center"
android:text="消息" />
android:id="@+id/contact"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:drawableTop="@drawable/contact"
android:gravity="center"
android:text="联系人" />
android:id="@+id/dynamic"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:drawableTop="@drawable/dynamic"
android:gravity="center"
android:text="动态" />
</LinearLayout>
其中android:background="@drawable/search_bg"和上面说的EditText以及Button是一样的资源文件。代码如下:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="60dp"/>
<solid android:color="#E9C9C6C6"/>
<padding android:top="2dp"
android:bottom="2dp"
android:left="2dp"
android:right="2dp"/>
<stroke android:width="4dp" android:color="#fff"/>
</shape>
然后<include layout="@layout/title"/>是导入一个标题栏。(其他的相信聪明的你能够明白,这就不用说了吧。)细心的你有没有发现QQ的标题栏和系统自带的不一样。在layout新建一个title.xml文件吧。里面的代码如下:
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ED1DAAC4"
android:orientation="horizontal">
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_gravity="center_vertical"
android:gravity="center"
android:id="@+id/image_left"/>
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="5"
android:layout_gravity="center_vertical"
android:gravity="center"
android:id="@+id/tv_name"
android:text="@string/app_name"/>
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_gravity="center_vertical"
android:src="@drawable/image_right"
android:gravity="center"
android:id="@+id/image_right"/>
</LinearLayout>
我们再写一个搜索界面(activity_search.xml)吧。(其实可以在搜索界面下面添加水平方向的RecyclerView布局,我这没写,后面再添加吧。)代码如下所示:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_weight="9"
android:id="@+id/search"
android:hint="搜索"
android:textColor="#EB5E5B5B"
android:background="@drawable/search_bg"
android:drawableLeft="@drawable/search"
android:paddingLeft="14dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"/>
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="@+id/cancel"
android:text="取消"
android:textColor="#F31D7BC5"
android:textSize="20dp"
android:gravity="center"/>
</LinearLayout>
新建menu如下图所示:
然后在menu文件里新建top.xml文件。
top.xml文件代码如下:
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@+id/all"
android:icon="@drawable/dynamic"
android:title="创建群聊"/>
<item android:id="@+id/find"
android:icon="@drawable/dynamic"
android:title="加好友/群"/>
<item android:id="@+id/see"
android:icon="@drawable/dynamic"
android:title="扫一扫"/>
<item android:id="@+id/face"
android:icon="@drawable/dynamic"
android:title="面对面快传"/>
<item android:id="@+id/money"
android:icon="@drawable/dynamic"
android:title="收付款"/>
</menu>
界面都弄得差不多了。接下来我们该响应活动了。(代码依次是登录,注册,主界面,搜索,导航栏)我们先设置只要密码不为空就能登录和注册。(数据储存还没学,后面学了我们在添加进来。)
登录(MainActivity.java)代码如下所示:
public class MainActivityextends AppCompatActivityimplements View.OnClickListener {
Button btn_login;
EditText l_name,l_pwd;
TextView forget,sign;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
btn_login = findViewById(R.id.btn_login);
l_name = findViewById(R.id.l_name);
l_pwd = findViewById(R.id.l_pwd);
forget = findViewById(R.id.forget);
//sign = findViewById(R.id.sign);
sign = findViewById(R.id.sign);
btn_login.setOnClickListener(this);
forget.setOnClickListener(this);
sign.setOnClickListener(this);
}
@Override
public void onClick(View v) {
switch(v.getId()){
case R.id.btn_login:
String name =l_name.getText().toString().trim();//获取用户名
String pwd =l_pwd.getText().toString().trim();//获取密码
if(!name.equals("") && !pwd.equals("")){
/*用户输入的和数据库里的值比较。
用户名和密码同时满足就进行跳转
*/
Intent intent =new Intent(MainActivity.this,IndexActivity.class);
startActivity(intent);
}else{
Toast.makeText(MainActivity.this, "用户名和密码不能为空!", Toast.LENGTH_SHORT).show();
}
break;
case R.id.forget:
/*点击后下面弹出一个小界面,分别显示:
找回密码,短信验证登录,取消
*/
break;
case R.id.sign:
Intent intent =new Intent(MainActivity.this,SignActivity.class);
startActivity(intent);
break;
default:
break;
}
}
}
注册(SignActivity.java)代码如下所示:
public class SignActivityextends AppCompatActivity {
Buttonbtn_sign;
EditTexts_name,s_pwd;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_sign);
btn_sign = findViewById(R.id.btn_sign);
s_name = findViewById(R.id.s_name);
s_pwd = findViewById(R.id.s_pwd);
btn_sign.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
String sign_name =s_name.getText().toString().trim();
String sign_pwd =s_pwd.getText().toString().trim();
if(!sign_name.equals("") && !sign_pwd.equals("")){
Intent intent =new Intent(SignActivity.this,IndexActivity.class);
startActivity(intent);
}else{
Toast.makeText(SignActivity.this, "用户名或密码为空!", Toast.LENGTH_SHORT).show();
}
}
});
}
}
首页(IndexActivity.java)代码如下所示:
public class IndexActivityextends AppCompatActivityimplements View.OnClickListener{
EditTextsearch;
TextViewmessage,contact,dynamic;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_index);
//隐藏系统默认的标题栏
ActionBar actionBar = getSupportActionBar();
if(actionBar !=null){
actionBar.hide();
}
search = findViewById(R.id.search);
message = findViewById(R.id.message);
contact = findViewById(R.id.contact);
dynamic = findViewById(R.id.dynamic);
search.setOnClickListener(this);
message.setOnClickListener(this);
contact.setOnClickListener(this);
dynamic.setOnClickListener(this);
}
@Override
public void onClick(View v) {
switch(v.getId()){
case R.id.search:
Intent intent =new Intent(IndexActivity.this,SearchActivity.class);
startActivity(intent);
break;
case R.id.message:
break;
case R.id.contact:
break;
case R.id.dynamic:
break;
}
}
//显示菜单
@Override
public boolean onCreateOptionsMenu(Menu menu){
getMenuInflater().inflate(R.menu.top,menu);
return true;
}
//相应事件
@Override
public boolean onOptionsItemSelected(MenuItem item){
switch (item.getItemId()){
case R.id.all:
Toast.makeText(this, "创建群聊", Toast.LENGTH_SHORT).show();
break;
case R.id.find:
Toast.makeText(this, "加好友/群", Toast.LENGTH_SHORT).show();
break;
case R.id.see:
Toast.makeText(this, "扫一扫", Toast.LENGTH_SHORT).show();
break;
case R.id.face:
Toast.makeText(this, "面对面快传", Toast.LENGTH_SHORT).show();
break;
case R.id.money:
Toast.makeText(this, "收付款", Toast.LENGTH_SHORT).show();
break;
default:
Toast.makeText(this, "找不到!", Toast.LENGTH_SHORT).show();
break;
}
return true;
}
}
搜索(SearchActivity.java)代码如下所示:
public class SearchActivityextends AppCompatActivityimplements View.OnClickListener{
TextViewcancel;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_search);
//隐藏系统自带的标题栏
ActionBar actionBar = getSupportActionBar();
actionBar.hide();
cancel = findViewById(R.id.cancel);
cancel.setOnClickListener(this);
}
@Override
public void onClick(View v){
switch(v.getId()){
case R.id.cancel:
Intent intent =new Intent(SearchActivity.this,IndexActivity.class);
startActivity(intent);
break;
}
}
}
标题栏(Title.java)代码如下所示:
public class Titleextends AppCompatActivityimplements View.OnClickListener {
ImageViewimage_left,image_right;
private Menumenu;
@SuppressLint("ResourceType")
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
image_left = findViewById(R.id.image_left);
image_right = findViewById(R.id.image_right);
menu = findViewById(R.menu.top);
image_left.setOnClickListener(this);
image_right.setOnClickListener(this);
}
/**
* Called when a view has been clicked.
*
* @param v The view that was clicked.
*/
@Override
public void onClick(View v) {
switch(v.getId()){
case R.id.image_left:
//头像处理
break;
case R.id.image_right:
//三个图标根据不同的activity之间互换
onCreateOptionsMenu(menu);
break;
default:
break;
}
}
//显示菜单
@Override
public boolean onCreateOptionsMenu(Menu menu){
getMenuInflater().inflate(R.menu.top,menu);
return true;
}
//相应事件
@Override
public boolean onOptionsItemSelected(MenuItem item){
switch (item.getItemId()){
case R.id.all:
Toast.makeText(this, "创建群聊", Toast.LENGTH_SHORT).show();
break;
case R.id.find:
Toast.makeText(this, "加好友/群", Toast.LENGTH_SHORT).show();
break;
case R.id.see:
Toast.makeText(this, "扫一扫", Toast.LENGTH_SHORT).show();
break;
case R.id.face:
Toast.makeText(this, "面对面快传", Toast.LENGTH_SHORT).show();
break;
case R.id.money:
Toast.makeText(this, "收付款", Toast.LENGTH_SHORT).show();
break;
default:
Toast.makeText(この、 "見つからない!"、Toast.LENGTH_SHORT)を.SHOW();
ブレーク;
}
trueを返します。
}
}
これらの友人。必要に応じて絵のためとして、あなたは自分自身を見つけるためにオンラインで行くことができます。それとも自分自身を取得します。
しかし、行われます。バグがたくさんあります。あなたは偉大な神を読む時間を持っている場合、あなたはそれを指摘することができます。私は変更します。例えば、どこの家には、ポップアップメニュープラス記号来ないの右上隅をクリックすることです。明確ではない、クリアを右に小さなアイコンを登録クリックで記号があります。これは私が今バグを見たものです。偉大な神の望みは、助けるために白に役立ちます。ありがとうございます。
ます。https://www.jianshu.com/p/4185c179dc9dで再現