devbox
知新_RL
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

UI界面开发- android studio搭建类微信界面_android开发聊天界面xml

作者：知新_RL | 2024-06-05 11:27:34

赞

踩

android开发聊天界面xml

目录

1.实验目的

2.开发过程

一、界面框架设计思路

Ⅰ：顶部标题区域top.xml

Ⅰ：底部功能选择区域botten.xml

Ⅲ：中间显示区域

 ①：创建不同的Fragment.java及layout

②：activity_main.xml整体框架搭建​编辑

③：实现Fragment的隐藏和显示

        1.在主函数中定义控件

        2.定义隐藏显示fragment函数 

        3.对控件进行监听

        4.对细节进行调整 

        5.整体思路

 3.运行截图 

4.代码地址

1.实验目的

  请开发一个类似微信的主页面框架，UI布局为上中下结构，包含4个tab页面；开发技术为：layout xml、控件、监听，fragment。

2.开发过程

一、界面框架设计思路

界面分为三部分

①：是顶部标题

②：是底部功能选择区域

③：是中间显示区域

Ⅰ：顶部标题区域top.xml

新建一个layout，起名top.xml

    该部分的实现方法为：最外层使用一个水平的linearlayout布局，然后使用一个textview即可

并确定好背景色字体大小等属性。

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="50dp"
  5.     android:gravity="center"
  6.     android:background="@color/black"
  7.     android:orientation="vertical"
  8.     >
  9.     <TextView
  10.         android:id="@+id/textView0"
  11.         android:layout_width="wrap_content"
  12.         android:layout_height="40dp"
  13.         android:layout_gravity="center"
  14.         android:layout_weight="1"
  15.         android:textSize="40sp"
  16.         android:textColor="@color/white"
  17.         android:text="微信" />
  18. </LinearLayout>
  19.

效果


 

Ⅰ：底部功能选择区域botten.xml

  该部分的设计思路如下：在该部分中一共有四个图片以及四个文本，每一个文本和一个图片组成一个垂直方向的元素，四个元素又组成一个水平方向的大框架。因此对于此部分，最外层采用水平的linearlayout的布局，在水平布局下又放四个垂直方向的linearlayout的布局，在每个垂直布局下又放上一个imageview和一个textview（imageview放在textview上层）即可。
 

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     xmlns:app="http://schemas.android.com/apk/res-auto"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="80dp"
  6.     >
  7.  
  8.     <LinearLayout
  9.         android:id="@+id/lot1"
  10.         android:layout_width="wrap_content"
  11.         android:layout_height="match_parent"
  12.         android:layout_weight="1"
  13.         android:gravity="center"
  14.         android:orientation="vertical"
  15.         >
  16.  
  17.         <ImageView
  18.             android:id="@+id/imageView1"
  19.             android:layout_width="match_parent"
  20.             android:layout_height="wrap_content"
  21.             app:srcCompat="?attr/actionModeCopyDrawable" />
  22.  
  23.         <TextView
  24.             android:id="@+id/textView1"
  25.             android:layout_width="match_parent"
  26.             android:layout_height="wrap_content"
  27.             android:gravity="center"
  28.             android:text="聊天"
  29.  
  30.             />
  31.     </LinearLayout>
  32.  
  33.     <LinearLayout
  34.         android:id="@+id/lout2"
  35.         android:layout_width="wrap_content"
  36.         android:layout_height="match_parent"
  37.         android:layout_weight="1"
  38.         android:gravity="center"
  39.         android:orientation="vertical">
  40.  
  41.         <ImageView
  42.             android:id="@+id/imageView2"
  43.             android:layout_width="match_parent"
  44.             android:layout_height="wrap_content"
  45.             app:srcCompat="?attr/actionModeCopyDrawable" />
  46.  
  47.         <TextView
  48.             android:id="@+id/textView2"
  49.             android:layout_width="match_parent"
  50.             android:layout_height="wrap_content"
  51.             android:gravity="center"
  52.             android:text="联系人" />
  53.     </LinearLayout>
  54.  
  55.     <LinearLayout
  56.         android:id="@+id/lout3"
  57.         android:layout_width="wrap_content"
  58.         android:layout_height="match_parent"
  59.         android:layout_weight="1"
  60.         android:gravity="center"
  61.         android:orientation="vertical">
  62.  
  63.         <ImageView
  64.             android:id="@+id/imageView3"
  65.             android:layout_width="match_parent"
  66.             android:layout_height="wrap_content"
  67.             app:srcCompat="?attr/actionModeCopyDrawable" />
  68.  
  69.         <TextView
  70.             android:id="@+id/textView3"
  71.             android:layout_width="match_parent"
  72.             android:layout_height="wrap_content"
  73.             android:gravity="center"
  74.             android:text="朋友圈" />
  75.     </LinearLayout>
  76.  
  77.     <LinearLayout
  78.         android:id="@+id/lout4"
  79.         android:layout_width="wrap_content"
  80.         android:layout_height="match_parent"
  81.         android:layout_weight="1"
  82.         android:gravity="center"
  83.         android:orientation="vertical">
  84.         <ImageView
  85.             android:id="@+id/imageView4"
  86.             android:layout_width="match_parent"
  87.             android:layout_height="wrap_content"
  88.             app:srcCompat="?attr/actionModeCopyDrawable" />
  89.         <TextView
  90.             android:id="@+id/textView4"
  91.             android:layout_width="match_parent"
  92.             android:layout_height="wrap_content"
  93.             android:gravity="center"
  94.             android:text="设置" />
  95.     </LinearLayout>
  96. </LinearLayout>

 效果

 

Ⅲ：中间显示区域

 ①：创建对应的四个Fragment.xml文件

  chat_fragment.xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent">
  5.     <TextView
  6.         android:id="@+id/textView5"
  7.         android:layout_width="match_parent"
  8.         android:layout_height="match_parent"
  9.         android:layout_weight="1"
  10.         android:text="这是聊天页面"
  11.         android:gravity="center"
  12.         android:layout_gravity="center"
  13.         android:textSize="30sp"
  14.         />
  15. </LinearLayout>
  16.

 

  1. package com.example.wechat;
  2. import android.os.Bundle;
  3. import androidx.fragment.app.Fragment;
  4. import android.view.LayoutInflater;
  5. import android.view.View;
  6. import android.view.ViewGroup;
  7. public class chatFragment extends Fragment {
  8.     public chatFragment() {
  9.         // Required empty public constructor
  10.     }
  11.     
  12.     @Override
  13.     public View onCreateView(LayoutInflater inflater, ViewGroup container,
  14.                              Bundle savedInstanceState) {
  15.         // Inflate the layout for this fragment
  16.         return inflater.inflate(R.layout.chat_fragment, container, false);
  17.     }
  18. }

同样的模式编写另外三个.xml

②：activity_main.xml整体框架搭建

    整体框架就是将top，bottem以及中间的主内容进行拼接，那么最外层就需要使用一个垂直方向的lineaarlayout，然后将top和bottom部分liclude进来（top在上，bottom在下，中间放主内容），同时中间的主内容使用framelayout，以便进行接下来的交互设计。
 

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     xmlns:app="http://schemas.android.com/apk/res-auto"
  4.     xmlns:tools="http://schemas.android.com/tools"
  5.     android:layout_width="match_parent"
  6.     android:layout_height="match_parent"
  7.     tools:context=".MainActivity">
  8.  
  9.     <LinearLayout
  10.         android:layout_width="match_parent"
  11.         android:layout_height="match_parent"
  12.         android:orientation="vertical">
  13.  
  14.         <include layout="@layout/top"/>
  15.         <FrameLayout
  16.             android:id="@+id/content"
  17.             android:layout_width="match_parent"
  18.             android:layout_height="0dp"
  19.             android:layout_weight="1"
  20.             >
  21.         </FrameLayout>
  22.         <include layout="@layout/botten"/>
  23.     </LinearLayout>
  24.  
  25. </androidx.constraintlayout.widget.ConstraintLayout>
  26.

③：实现Fragment的隐藏和显示

  我们需要将四个Fragment隐藏起来，只有在点击相应的导航时才会出现相应的Frgment，而另外三个将会继续隐藏起来，那么实现方法如下：  

1.在主函数中定义控件

  1. private Fragment setragment=new setragment();
  2.     private  Fragment chatFragment=new chatFragment();
  3.     private  Fragment discoverFragment = new discoverFragment();
  4.     private  Fragment linmanFragment =new linmanFragment();
  5.     private FragmentManager fragmentManager;
  6.     private LinearLayout LinearLayout1,LinearLayout2,LinearLayout3,LinearLayout4;
  7.     private TextView  textView;

2.定义隐藏显示fragment函数

  1.  private  void showfragment(int i){
  2.         androidx.fragment.app.FragmentTransaction transaction = fragmentManager.beginTransaction();
  3.         hideFragment(transaction);
  4.         switch (i) {
  5.             case 0:
  6.                 transaction.show(chatFragment);
  7.                 LinearLayout1.setBackgroundColor(Color.BLACK);
  8.                 break;
  9.             case 1:
  10.                 transaction.show(linmanFragment);
  11.                 break;
  12.             case 2:
  13.                 transaction.show(discoverFragment);
  14.                 break;
  15.             case 3:
  16.                 transaction.show(setragment);
  17.                 break;
  18.             default:
  19.                 break;
  20.         }
  21.         transaction.commit();
  22.     }
  23.  
  1.  private void hideFragment(androidx.fragment.app.FragmentTransaction transaction) {
  2.         transaction.hide(setragment);
  3.         transaction.hide(chatFragment);
  4.         transaction.hide(discoverFragment);
  5.         transaction.hide(linmanFragment);
  6.     }

3.对控件进行监听

  1.  @Override
  2.     protected void onCreate(Bundle savedInstanceState) {
  3.         super.onCreate(savedInstanceState);
  4.         setContentView(R.layout.activity_main);
  5.         LinearLayout1 = findViewById(R.id.lot1);
  6.         LinearLayout2=findViewById(R.id.lout2);
  7.         LinearLayout3=findViewById(R.id.lout3);
  8.         LinearLayout4=findViewById(R.id.lout4);
  9.         textView=findViewById(R.id.textView0);
  10.         LinearLayout1.setOnClickListener((View.OnClickListener) this);
  11.         LinearLayout2.setOnClickListener((View.OnClickListener) this);
  12.         LinearLayout3.setOnClickListener((View.OnClickListener) this);
  13.         LinearLayout4.setOnClickListener((View.OnClickListener) this);
  14.         initFragment();
  15.     }
  16.  
  17.  @Override
  18.     public void onClick(View v){
  19.         switch (v.getId()){
  20.             case R.id.lot1:
  21.                 showfragment(0);
  22.                 showcolor(0);
  23.  
  24.                 break;
  25.             case R.id.lout2:
  26.                 showfragment(1);
  27.                 showcolor(1);
  28.                 break;
  29.             case R.id.lout3:t:
  30.                 showfragment(2);
  31.                 showcolor(2);
  32.                 break;
  33.             case R.id.lout4:
  34.                 showfragment(3);
  35.                 showcolor(3);
  36.                 break;
  37.             default:
  38.                 break;
  39.  
  40.         }
  41.     }
  42.

4.对细节进行调整

  1. private void showcolor(int i) {
  2.         LinearLayout1.setBackgroundColor(Color.WHITE);
  3.         LinearLayout2.setBackgroundColor(Color.WHITE);
  4.         LinearLayout3.setBackgroundColor(Color.WHITE);
  5.         LinearLayout4.setBackgroundColor(Color.WHITE);
  6.         switch (i) {
  7.             case 0:
  8.                 LinearLayout1.setBackgroundColor(Color.GREEN);
  9.                 textView.setText("微信");
  10.                 break;
  11.             case 1:
  12.                 LinearLayout2.setBackgroundColor(Color.GREEN);
  13.                 textView.setText("通讯录");
  14.                 break;
  15.             case 2:
  16.                 LinearLayout3.setBackgroundColor(Color.GREEN);
  17.                 textView.setText("朋友圈");
  18.                 break;
  19.             case 3:
  20.                 LinearLayout4.setBackgroundColor(Color.GREEN);
  21.                 textView.setText("设置");
  22.                 break;
  23.             default:
  24.                 break;
  25.  
  26.         }
  27.     }
  28.

5.整体思路

通过监听用户点击来实现页面变化

主要过程是onClick()函数判断点击位置，showfragment()改变成对应页面

3.运行截图

 

 4.代码地址

https://gitee.com/Jasonnoon/weichat11.giticon-default.png?t=N176https://gitee.com/Jasonnoon/weichat11.git

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/676317
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号