提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档
设计目标
提示:这里可以添加本文要记录的大概内容:
通过使用AS控件结合虚拟机来实现微信界面设计,使用控件有TextView,FrameLayout,Linerlayout,imageView,并通过fragment.java(4个java文件对应4个fragment界面),MainActivity.java来实现。
提示:以下是本篇文章正文内容,下面案例可供参考
一、结果展示
bottom.xml
chat.xml(剩余3个fragment.xml类似)
top.xml
activity_main.xml
虚拟机上结果
二、top.xml
微信界面顶部标题
代码如下(示例):
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
>
<TextView
android:id="@+id/textView5"
android:layout_width="414dp"
android:layout_height="57dp"
android:background="#426F42"
android:orientation="vertical"
android:text="微信界面设计"
android:gravity="center"
android:textColor="#ffffff"
app:layout_constraintTop_toTopOf="parent"
tools:layout_editor_absoluteX="2dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
三、bottom.xml
在Linerlayout下添加4个linerlayout布局对应的4个textview
代码如下(示例):
<?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:id="@+id/Linerlayout"
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="@color/white"
tools:context=".MainActivity"
>
<LinearLayout
android:id="@+id/linearLayout1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/imageView5"
android:layout_width="match_parent"
android:layout_height="51dp"
app:srcCompat="@android:drawable/sym_action_chat" />
<TextView
android:id="@+id/textView2"
android:layout_width="103dp"
android:layout_height="63dp"
android:gravity="center"
android:text="聊天"
android:textColor="@color/black"
android:textSize="24sp" />
</LinearLayout>
<LinearLayout
android:id="@+id/linearLayout2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/imageView6"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:srcCompat="@android:drawable/btn_radio" />
<TextView
android:id="@+id/textView3"
android:layout_width="match_parent"
android:layout_height="65dp"
android:gravity="center"
android:text="看点"
android:textColor="@color/black"
android:textSize="24sp" />
</LinearLayout>
<LinearLayout
android:id="@+id/linearLayout3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/imageView7"
android:layout_width="103dp"
android:layout_height="50dp"
app:srcCompat="@android:drawable/ic_menu_add" />
<TextView
android:id="@+id/textView4"
android:layout_width="match_parent"
android:layout_height="63dp"
android:gravity="center"
android:text="设置"
android:textColor="@color/black"
android:textSize="24sp" />
</LinearLayout>
<LinearLayout
android:id="@+id/linearLayout4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/imageView8"
android:layout_width="match_parent"
android:layout_height="48dp"
app:srcCompat="@android:drawable/sym_action_call" />
<TextView
android:id="@+id/textView"
android:layout_width="match_parent"
android:layout_height="66dp"
android:gravity="center"
android:text="联系人"
android:textColor="@color/black"
android:textSize="24sp" />
</LinearLayout>
</LinearLayout>
四、4个fragment.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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".Fragment1">
<!-- TODO: Update blank fragment layout -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:textSize="50sp"
android:text="这是聊天界面" />
</FrameLayout>
看点界面
<?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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".Fragment2">
<!-- TODO: Update blank fragment layout -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:textSize="50sp"
android:layout_weight="1"
android:text="这是看点界面" />
</FrameLayout>
设置界面
<?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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".Fragment3">
<!-- TODO: Update blank fragment layout -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:textSize="50sp"
android:text="这是设置界面" />
</FrameLayout>
联系人界面
<?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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".Fragment4">
<!-- TODO: Update blank fragment layout -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:textSize="50sp"
android:text="这是联系界面" />
</FrameLayout>
五、activity_main.xml
将top.xml,bottom.xml和4个fragment.xml结合起来
<?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"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<FrameLayout
android:id="@+id/id_content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</FrameLayout>
<include
layout="@layout/bottom"
android:gravity="bottom" />
</LinearLayout>
六、java文件
fragment.java文件(剩余3个类似)
package com.example.myapplication;
import android.os.Bundle;
import android.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class Fragment1 extends Fragment {
public Fragment1() {
// Required empty public constructor
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.chat, container, false);
}
}
MainActivity.java文件
package com.example.myapplication;
import androidx.appcompat.app.AppCompatActivity;
import android.app.Fragment;
import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.widget.LinearLayout;
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
private Fragment fragment1=new Fragment1();
private Fragment fragment2=new Fragment2();
private Fragment fragment3=new Fragment3();
private Fragment fragment4=new Fragment4();
private FragmentManager fragmentManager;
private LinearLayout linearLayout1,linearLayout2,linearLayout3,linearLayout4;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
linearLayout1=findViewById(R.id.linearLayout1);
linearLayout2=findViewById(R.id.linearLayout2);
linearLayout3=findViewById(R.id.linearLayout3);
linearLayout4=findViewById(R.id.linearLayout4);
linearLayout1.setOnClickListener(this);
linearLayout2.setOnClickListener(this);
linearLayout3.setOnClickListener(this);
linearLayout4.setOnClickListener(this);
initFragment();
}
private void initFragment(){
fragmentManager=getFragmentManager();
FragmentTransaction transaction=fragmentManager.beginTransaction();
transaction.add(R.id.id_content,fragment1);
transaction.add(R.id.id_content,fragment2);
transaction.add(R.id.id_content,fragment3);
transaction.add(R.id.id_content,fragment4);
hideFragment(transaction);
transaction.commit();
}
private void hideFragment(FragmentTransaction transaction){
transaction.hide(fragment1);
transaction.hide(fragment2);
transaction.hide(fragment3);
transaction.hide(fragment4);
}
private void background(View v) {
switch (v.getId()) {
case R.id.linearLayout1:
linearLayout1.setBackgroundColor(Color.parseColor("#426F42"));
break;
case R.id.linearLayout2:
linearLayout2.setBackgroundColor(Color.parseColor("#426F42"));
break;
case R.id.linearLayout3:
linearLayout3.setBackgroundColor(Color.parseColor("#426F42"));
break;
case R.id.linearLayout4:
linearLayout4.setBackgroundColor(Color.parseColor("#426F42"));
break;
default:
break;
}
}
private void backgroundreturn(View v) {
switch (v.getId()) {
case R.id.linearLayout1:
linearLayout1.setBackgroundColor(Color.parseColor("#426F42"));
break;
case R.id.linearLayout2:
linearLayout2.setBackgroundColor(Color.parseColor("#426F42"));
break;
case R.id.linearLayout3:
linearLayout3.setBackgroundColor(Color.parseColor("#426F42"));
break;
case R.id.linearLayout4:
linearLayout4.setBackgroundColor(Color.parseColor("#426F42"));
break;
default:
break;
}
}
private void showfragmnet(int i) {
FragmentTransaction transaction=fragmentManager.beginTransaction();
hideFragment(transaction);
switch (i){
case 0:
transaction.show(fragment1);
background(linearLayout1);
backgroundreturn(linearLayout3);
backgroundreturn(linearLayout2);
backgroundreturn(linearLayout4);
break;
case 1:
transaction.show(fragment2);
background(linearLayout2);
backgroundreturn(linearLayout4);
backgroundreturn(linearLayout1);
backgroundreturn(linearLayout3);
break;
case 2:
transaction.show(fragment3);
background(linearLayout3);
backgroundreturn(linearLayout4);
backgroundreturn(linearLayout2);
backgroundreturn(linearLayout1);
break;
case 3:
transaction.show(fragment4);
background(linearLayout4);
backgroundreturn(linearLayout1);
backgroundreturn(linearLayout2);
backgroundreturn(linearLayout3);
break;
default:
break;
}
transaction.commit();
}
@Override
public void onClick(View v) {
switch (v.getId()){
case R.id.linearLayout1:
showfragmnet(0);
break;
case R.id.linearLayout2:
showfragmnet(1);
break;
case R.id.linearLayout3:
showfragmnet(2);
break;
case R.id.linearLayout4:
showfragmnet(3);
break;
default:
break;
}
}
}
总结
通过这次实验,我学会了如何布局和使用AS中的相关空间,以及结合所学的java知识来编写,还学会了使用提示器通过提示器来快速使用所需要的函数。在编写MainActivity.java时遇到了些许问题,比如如何实现当点击一个控件时只显示该控件的界面,这里需要编写隐藏函数,当点击事件发生时隐藏其余界面。通过这次实验,知道了自己的不足之处要想有进步则需花时间认真完成。
仓库
https://gitee.com/liupeng321/gitee-liupeng