目录
前言
这次实验是第一次自己真正意义上的移动开发学习,关于移动界面的设计,自己收获很多,希望看到的小伙伴也有收获。
一、界面介绍
1.实现类微信界面的功能,一共需要7个xml和5个java文件
2.展示出四个可切换界面:微信、消息、目录(通讯录)、设置;
2.整体页面颜色我设置的是以蓝色为主,自己可单独设置主色调以及界面中的文字
二、代码介绍
1.bottom.xml
首先我们将constraintlayout通过convert view转换成LinearLayout(horizontal),然后在里面添加1个LinearLayout(vertical),在LinearLayout(vertical)里面添加一个imageview控件和textview控件,再将LinearLayout(vertical)复制三个,再分别更改他们的id
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/linear_bottom"
android:layout_width="match_parent"
android:layout_gravity="bottom"
android:background="@color/blue"
android:layout_height="55dp">
<LinearLayout
android:id="@+id/wx_linear"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<ImageView
android:id="@+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
app:srcCompat="@drawable/p1" />
<TextView
android:id="@+id/textView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="2"
android:gravity="center"
android:textColor="#fff"
android:text="目录" />
</LinearLayout>
<LinearLayout
android:id="@+id/txl_linear"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<ImageView
android:id="@+id/imageView2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
app:srcCompat="@drawable/p2" />
<TextView
android:id="@+id/textView2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="2"
android:gravity="center"
android:text="消息"
android:textColor="#fff" />
</LinearLayout>
<LinearLayout
android:id="@+id/fx_linear"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<ImageView
android:id="@+id/imageView3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
app:srcCompat="@drawable/p3" />
<TextView
android:id="@+id/textView3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="2"
android:gravity="center"
android:textColor="#fff"
android:text="设置" />
</LinearLayout>
<LinearLayout
android:id="@+id/w_linear"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<ImageView
android:id="@+id/imageView4"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
app:srcCompat="@drawable/p4" />
<TextView
android:id="@+id/textView4"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="2"
android:gravity="center"
android:textColor="#fff"
android:text="微信" />
</LinearLayout>
</LinearLayout>
2.message_flagment.xml
其他页面的xml文件类似,通过这个代码可以变通:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/body_fx"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".BookmarkFragment">
<!-- TODO: Update blank fragment layout -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:textSize="28sp"
android:text="目录" />
</FrameLayout>
3.top.xml
介绍:即页面头顶的设计:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/linear_top"
android:layout_width="match_parent"
android:gravity="center"
android:background="@color/blue"
android:layout_height="55dp">
<TextView
android:id="@+id/text_top"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="我的界面"
android:textAlignment="center"
android:textSize="22sp" />
</LinearLayout>
4.Activity_main.xml
介绍:当你想使用其他的图片当图标,只需要将图片拉进入drawable中,就可以使用了
代码:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<include layout="@layout/top"/>
<FrameLayout
android:id="@+id/body"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</FrameLayout>
<include layout="@layout/bottom"/>
</LinearLayout>
5.MessageFlagment.java
介绍:因为其他的java界面文件类似,以MessageFlagment为例:
package com.example.homework1_xc;
import android.os.Bundle;
import androidx.fragment.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
/**
* A simple {@link Fragment} subclass.
* Use the {@link MessageFlagment#newInstance} factory method to
* create an instance of this fragment.
*/
public class MessageFlagment extends Fragment {
// TODO: Rename parameter arguments, choose names that match
// the fragment initialization parameters, e.g. ARG_ITEM_NUMBER
private static final String ARG_PARAM1 = "param1";
private static final String ARG_PARAM2 = "param2";
// TODO: Rename and change types of parameters
private String mParam1;
private String mParam2;
public MessageFlagment() {
// Required empty public constructor
}
/**
* Use this factory method to create a new instance of
* this fragment using the provided parameters.
*
* @param param1 Parameter 1.
* @param param2 Parameter 2.
* @return A new instance of fragment BodyTxl.
*/
// TODO: Rename and change types and number of parameters
public static MessageFlagment newInstance(String param1, String param2) {
MessageFlagment fragment = new MessageFlagment();
Bundle args = new Bundle();
args.putString(ARG_PARAM1, param1);
args.putString(ARG_PARAM2, param2);
fragment.setArguments(args);
return fragment;
}
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
if (getArguments() != null) {
mParam1 = getArguments().getString(ARG_PARAM1);
mParam2 = getArguments().getString(ARG_PARAM2);
}
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.message_flagment, container, false);
}
}
6.MainActivity.java
package com.example.homework1_xc;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentTransaction;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
private LinearLayout linearWx,linearMF,linearBM,linearS;
private ImageView imgWx,imgTxl,imgBM,imgW,imgCur;
private TextView textWx,textTxl,textFx,textW,textCur;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
initFun();
addFragment(new SetFlagment());
imgWx.setSelected(true);
textWx.setSelected(true);
}
private void initFun(){
linearWx = findViewById(R.id.wx_linear);
linearWx.setOnClickListener(this);
linearMF = findViewById(R.id.txl_linear);
linearMF.setOnClickListener(this);
linearBM = findViewById(R.id.fx_linear);
linearBM.setOnClickListener(this);
linearS = findViewById(R.id.w_linear);
linearS.setOnClickListener(this);
imgWx = findViewById(R.id.imageView);
imgTxl = findViewById(R.id.imageView2);
imgBM = findViewById(R.id.imageView3);
imgW = findViewById(R.id.imageView4);
imgCur = findViewById(R.id.imageView);
textWx = findViewById(R.id.textView);
textTxl = findViewById(R.id.textView2);
textFx = findViewById(R.id.textView3);
textW = findViewById(R.id.textView4);
textCur = findViewById(R.id.textView);
}
@Override
public void onClick(View view) {
switch (view.getId()){
case R.id.wx_linear:
changeFragment(new BookmarkFragment());
colorChange(1);
break;
case R.id.txl_linear:
changeFragment(new MessageFlagment());
colorChange(2);
break;
case R.id.fx_linear:
changeFragment(new WechatFlagment());
colorChange(3);
break;
case R.id.w_linear:
changeFragment(new SetFlagment());
colorChange(4);
break;
default:
break;
}
}
private void colorChange(int id){
textCur.setSelected(false);
imgCur.setSelected(false);
switch (id){
case 1:
imgWx.setSelected(true);
imgCur=imgWx;
textWx.setSelected(true);
textCur=textWx;
break;
case 2:
imgTxl.setSelected(true);
imgCur=imgTxl;
textTxl.setSelected(true);
textCur=textTxl;
break;
case 3:
imgBM.setSelected(true);
imgCur=imgBM;
textFx.setSelected(true);
textCur=textFx;
break;
case 4:
imgW.setSelected(true);
imgCur=imgW;
textW.setSelected(true);
textCur=textW;
break;
default:
break;
}
}
private void changeFragment(Fragment fragment){
FragmentManager fragmentManager = getSupportFragmentManager();
FragmentTransaction transaction = fragmentManager.beginTransaction();
transaction.replace(R.id.body, fragment);
transaction.commit();
}
private void addFragment(Fragment fragment){
FragmentManager fragmentManager = getSupportFragmentManager();
FragmentTransaction transaction = fragmentManager.beginTransaction();
transaction.add(R.id.body, fragment);
transaction.commit();
}
}
三.结果图片
四.总结
其中让我最为印象深刻的就是监听。监听器就是一旦按钮或者其他组件被用例如鼠标点击,就会产生一个事件出来,这个事件就需要我们去监听他,监听后并把需要执行的代码给予这个点击事件,首先在XML文件里面需要把组件建立一个唯一的名字,然后在java的MainActivity中编写代码,让页面MainActivity的onCreate方法能够找到这个组件并进行监听,实现方法就是通过匿名内部类来实现点击触发。