功能要求
开发一个类似微信的主界面框架，UI布局为上中下三层布局，包含聊天、联系人、发现、设置四个界面，当点击底部部件的时候可以进行页面切换，并且在某一页面中使用recycleview控件
开发技术
activity，xml，fragment，button，fragment，recycleview
思路分析
分为上中下三个部分分开设计，顶部仅包含微信界面，中间部分显示对应按钮的文本，底部为四个按钮，点击底部四个按钮中间会显示对应部分的内容，再将recycleview控件添加至联系人界面中
设计过程
1.制作顶部部分
在Android Studio的项目文件中找到res文件夹下的layout文件夹，创建一个top.xml
在Text中拉入TextView组件，并在代码行将名字改为“微信”，文字居中，字体黑底白色，字体大小为40sp
android:background="@color/black"
android:text="微信"
android:gravity="center"
android:textColor="@color/white"
android:textSize="40sp"
效果图如下
2.制作底部部分
和制作顶部部件一样先创建button.xml，再拖入Layouts中的LinearLayout（vertical）组件，再LinearLayout（vertical）下方拖入Widgets中的ImageView和Text中的textView，因为背景为黑色，所以在第一个LinearLayout中background设置为black
<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="wrap_content"
android:layout_height="wrap_content"
android:background="@color/black">
由于共四个底部按钮，且都相同，先做一个其他复制粘贴即可，将该LinearLayout（vertical）在代码行中命名为LinearLayout1，将ImageView和textView分别命名为ImageView11，textView11方便调用，由于字体仍需居中且字体为白色因此和顶部部分字体一样即可。
<LinearLayout
android:id="@+id/LinearLayout1"
android:layout_width="102dp"
android:layout_height="match_parent"
android:onClick="onClick"
android:orientation="vertical">
<ImageView
android:id="@+id/imageView11"
android:layout_width="match_parent"
android:layout_height="102dp"
app:srcCompat="@android:drawable/alert_light_frame" />
<TextView
android:id="@+id/textView11"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="聊天"
android:gravity="center"
android:textColor="@color/white"
android:textSize="30sp" />
</LinearLayout>
其他底部按钮如上，改名称即可，具体效果图如下
3.中间部分
和制作顶部一样先创建一个layout.xml，再将Containers中的include组件采用右键添加的方式选择top.xml
再用同样的方法添加button.xml，最后在两者中间添加Layouts中的FragmeLayout组件，并将该名称改为content，调整FrameLayout大小直至如微信界面图
<FrameLayout
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="575dp">
中间内容也需要对应的显示故先创建一个其他复制粘贴即可，先在Java的com.example.myapplication中创建一个fragment
然后layout中会出现对应的xml文件，把该xml文件删除，在新建一个tab1.xml文件，里面放入一个textView并命名为textView6
<TextView
android:id="@+id/textView6"
android:layout_width="wrap_content"
android:layout_height="46dp"
android:layout_weight="1"
android:gravity="center"
android:layout_gravity="center"
android:text="这是聊天界面"
android:textSize="40sp"
/>
效果图如下
再将BlankFragment中的代码改为return inflater.inflate(R.layout.tab1, container, false);
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.tab1, container, false);
}
}
其他三个一样操作，总体效果图如下
4.添加recycleview控件至联系人界面
创建一个xml文件用于存放Containers中的recycleview控件，并将该控件id命名为recycleview，这里xml名为activity_recycle_view_main.xml
创建一个xml文件用于存放与recycleview会对接用到的textview控件,这里名为item.xml
文字居中，width调成match_parent即可，否则会占满一整个屏幕
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:color="@color/black"
android:gravity="center"
android:text="TextView"
android:textSize="35sp" />
5.java文件编写
我们目前只有简单的页面显示，由于需要点击部件更新中间的显示内容，所以要考虑以下内容：
（1）首先在Mainactivity.java中将4个fragment压入content里面的代码部分
首先要导入四个中间fragment卡片到主体界面里面，需要先定义四个fragment再new出该各个界面的对象并创建出一个管理对象fragfragment变量
Fragment fragment1,fragment2,fragment3,fragment4;
FragmentManager fm;
fragment1 = new BlankFragment();
fragment2 = new BlankFragment2();
fragment3 = new BlankFragment3();
fragment4 = new BlankFragment4();
（2）初始化四个页面
新建一个inital函数用以给Fragment页面初始化，在此函数中，将此前定义个4个Fragment变量使用fragmentManager添加到main文件中的中间主体部分的布局中
private void initial() {
FragmentTransaction ft=fm.beginTransaction()
.add(R.id.content,fragment1)
.add(R.id.content,fragment2)
.add(R.id.content,fragment3)
.add(R.id.content,fragment4)
;
ft.commit();
}
（3）展示对应页面内容
在点击四个部件时需要展示其所代表的界面，故编写新的一个函数fragment_show，展示fragment界面
private void fragment_show(Fragment fragment) {
FragmentTransaction transaction=fm.beginTransaction()
.show(fragment);
transaction.commit();
}
（4）隐藏不需要的页面内容
在切换界面时，需要对原先的界面进行隐藏之后再展示所需界面，故编写一个新的函数fragment_hide，将所有的fragment界面都隐藏
private void fragment_hide() {
FragmentTransaction ft=fm.beginTransaction()
.hide(fragment1)
.hide(fragment2)
.hide(fragment3)
.hide(fragment4);
ft.commit();
}
（5）监听底部控件
LinearLayout linearlayout1,linearlayout2,linearlayout3,linearlayout4;
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);
this会报错，那么在public class中增加implements View.OnClickListener并增添public void onClick即可
public class MainActivity extends AppCompatActivity implements View.OnClickListener
public void onClick(View view) {
fragment_hide();
int i=view.getId();
if (i==R.id.LinearLayout1)
fragment_show(fragment1);
else if (i==R.id.LinearLayout2)
fragment_show(fragment2);
else if (i==R.id.LinearLayout3)
fragment_show(fragment3);
else if (i==R.id.LinearLayout4)
fragment_show(fragment4);
}
在这里采用的是if语句，由于版本不同，有的版本也可采用switch语句
public void onClick(View view) {
fragmentHide();
switch (view.getId())
{
case R.id.LinearLayout1:fragment_show(fragment1);
break;
case R.id.LinearLayout2:fragment_show(fragment2);
break;
case R.id.LinearLayout3:fragment_show(fragment3);
break;
case R.id.LinearLayout4:fragment_show(fragment4);
break;
}
}
（6）最开始的页面展示
在最开始的界面自然就是聊天界面，故在最开始的时候就调用聊天的fragment
fragment_show(fragment1);
（7）创建Myadapter.Java文件并编写
创建Myadapter类，将数据绑定在recycleview对应的item上
public class Myadapter extends RecyclerView.Adapter<Myadapter.Myholder> {
Context context1;
List list1;
public Myadapter(Context context,List list){
context1=context;
list1=list;
}
@NonNull
@Override
public Myholder onCreateViewHolder(@NonNull ViewGroup parent,int viewType){
View view=LayoutInflater.from(context1).inflate(R.layout.item,parent,false);
Myholder holder=new Myholder(view);
return holder;
}
@Override
public void onBindViewHolder(@NonNull Myadapter.Myholder holder, int position) {
String name=list1.get(position).toString();
holder.textView.setText(name);
}
@Override
public int getItemCount() {
return list1.size();
}
public class Myholder extends RecyclerView.ViewHolder{
TextView textView;
public Myholder(@NonNull View itemView) {
super(itemView);
textView=itemView.findViewById(R.id.textView1);
}
}
}
（8）编写联系人界面对应的fragment类
在外部增加recycleview，myadapter和list的声明然后将最底部return 返回view，之后再编写对应的内容即可，注意一定要连接的是activity_recycle_view_main.xml
public class BlankFragment2 extends Fragment {
RecyclerView recyclerView;
List list;
Myadapter adapter;
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View view;
view=inflater.inflate(R.layout.activity_recycle_view_main,container,false);
recyclerView=view.findViewById(R.id.recyclerview);
String[] names={"父亲", "母亲", "同学A", "同学B","同学C","同学D","同学E","同学F","同学G"};
List<String> items=new ArrayList<String>();
for(int i=0;i< names.length;i++)
{
items.add(names[i]);
}
Context context=this.getContext();
adapter = new Myadapter(context,items);
recyclerView.setAdapter(adapter);
LinearLayoutManager manager=new LinearLayoutManager(context);
manager.setOrientation(RecyclerView.VERTICAL);
recyclerView.setLayoutManager(manager);
return view;
}
}
结果展示
总结
经过这样一个简单的类似微信的界面设计，我对于AS基本的代码编写部分和xml文件进行界面编写部分以及相关的控件等有了一定程度上的理解，有了一定的进行UI界面的设计的能力，学会了通过提词器等功能进行功能和界面相互连接的代码的编写，在添加recycleview控件时注意一定要编写对应的fragment类而不是mainactivity，否则会报错。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
