UI界面开发- android studio搭建类微信界面

这篇具有很好参考价值的文章主要介绍了UI界面开发- android studio搭建类微信界面。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

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即可

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

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:gravity="center"
    android:background="@color/black"
    android:orientation="vertical"
    >
    <TextView
        android:id="@+id/textView0"
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:textSize="40sp"
        android:textColor="@color/white"
        android:text="微信" />
</LinearLayout>

效果

androidstudio微信聊天界面,android studio,ui,android
 

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

  该部分的设计思路如下:在该部分中一共有四个图片以及四个文本,每一个文本和一个图片组成一个垂直方向的元素,四个元素又组成一个水平方向的大框架。因此对于此部分,最外层采用水平的linearlayout的布局,在水平布局下又放四个垂直方向的linearlayout的布局,在每个垂直布局下又放上一个imageview和一个textview(imageview放在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"
    android:layout_width="match_parent"
    android:layout_height="80dp"
    >
 
    <LinearLayout
        android:id="@+id/lot1"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical"
        >
 
        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:srcCompat="?attr/actionModeCopyDrawable" />
 
        <TextView
            android:id="@+id/textView1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="聊天"
 
            />
    </LinearLayout>
 
    <LinearLayout
        android:id="@+id/lout2"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">
 
        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:srcCompat="?attr/actionModeCopyDrawable" />
 
        <TextView
            android:id="@+id/textView2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="联系人" />
    </LinearLayout>
 
    <LinearLayout
        android:id="@+id/lout3"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">
 
        <ImageView
            android:id="@+id/imageView3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:srcCompat="?attr/actionModeCopyDrawable" />
 
        <TextView
            android:id="@+id/textView3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="朋友圈" />
    </LinearLayout>
 
    <LinearLayout
        android:id="@+id/lout4"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">
        <ImageView
            android:id="@+id/imageView4"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:srcCompat="?attr/actionModeCopyDrawable" />
        <TextView
            android:id="@+id/textView4"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="设置" />
    </LinearLayout>
</LinearLayout>

 效果

androidstudio微信聊天界面,android studio,ui,android

 

Ⅲ:中间显示区域

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

  chat_fragment.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:id="@+id/textView5"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:text="这是聊天页面"
        android:gravity="center"
        android:layout_gravity="center"
        android:textSize="30sp"
        />
</LinearLayout>

 

package com.example.wechat;
import android.os.Bundle;
import androidx.fragment.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class chatFragment extends Fragment {
    public chatFragment() {
        // 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_fragment, container, false);
    }
}

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

②:activity_main.xml整体框架搭建

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

<?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"
    tools:context=".MainActivity">
 
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
 
        <include layout="@layout/top"/>
        <FrameLayout
            android:id="@+id/content"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            >
        </FrameLayout>
        <include layout="@layout/botten"/>
    </LinearLayout>
 
</androidx.constraintlayout.widget.ConstraintLayout>

③:实现Fragment的隐藏和显示

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

1.在主函数中定义控件

private Fragment setragment=new setragment();
    private  Fragment chatFragment=new chatFragment();
    private  Fragment discoverFragment = new discoverFragment();
    private  Fragment linmanFragment =new linmanFragment();
    private FragmentManager fragmentManager;
    private LinearLayout LinearLayout1,LinearLayout2,LinearLayout3,LinearLayout4;
    private TextView  textView;

2.定义隐藏显示fragment函数

 private  void showfragment(int i){
        androidx.fragment.app.FragmentTransaction transaction = fragmentManager.beginTransaction();
        hideFragment(transaction);
        switch (i) {
            case 0:
                transaction.show(chatFragment);
                LinearLayout1.setBackgroundColor(Color.BLACK);
                break;
            case 1:
                transaction.show(linmanFragment);
                break;
            case 2:
                transaction.show(discoverFragment);
                break;
            case 3:
                transaction.show(setragment);
                break;
            default:
                break;
        }
        transaction.commit();
    }

 private void hideFragment(androidx.fragment.app.FragmentTransaction transaction) {
        transaction.hide(setragment);
        transaction.hide(chatFragment);
        transaction.hide(discoverFragment);
        transaction.hide(linmanFragment);
    }

3.对控件进行监听

 @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        LinearLayout1 = findViewById(R.id.lot1);
        LinearLayout2=findViewById(R.id.lout2);
        LinearLayout3=findViewById(R.id.lout3);
        LinearLayout4=findViewById(R.id.lout4);
        textView=findViewById(R.id.textView0);
        LinearLayout1.setOnClickListener((View.OnClickListener) this);
        LinearLayout2.setOnClickListener((View.OnClickListener) this);
        LinearLayout3.setOnClickListener((View.OnClickListener) this);
        LinearLayout4.setOnClickListener((View.OnClickListener) this);
        initFragment();
    }
 
 @Override
    public void onClick(View v){
        switch (v.getId()){
            case R.id.lot1:
                showfragment(0);
                showcolor(0);
 
                break;
            case R.id.lout2:
                showfragment(1);
                showcolor(1);
                break;
            case R.id.lout3:t:
                showfragment(2);
                showcolor(2);
                break;
            case R.id.lout4:
                showfragment(3);
                showcolor(3);
                break;
            default:
                break;
 
        }
    }

4.对细节进行调整

private void showcolor(int i) {
        LinearLayout1.setBackgroundColor(Color.WHITE);
        LinearLayout2.setBackgroundColor(Color.WHITE);
        LinearLayout3.setBackgroundColor(Color.WHITE);
        LinearLayout4.setBackgroundColor(Color.WHITE);
        switch (i) {
            case 0:
                LinearLayout1.setBackgroundColor(Color.GREEN);
                textView.setText("微信");
                break;
            case 1:
                LinearLayout2.setBackgroundColor(Color.GREEN);
                textView.setText("通讯录");
                break;
            case 2:
                LinearLayout3.setBackgroundColor(Color.GREEN);
                textView.setText("朋友圈");
                break;
            case 3:
                LinearLayout4.setBackgroundColor(Color.GREEN);
                textView.setText("设置");
                break;
            default:
                break;
 
        }
    }

5.整体思路

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

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

3.运行截图

androidstudio微信聊天界面,android studio,ui,android

 

 4.代码地址

https://gitee.com/Jasonnoon/weichat11.githttps://gitee.com/Jasonnoon/weichat11.git文章来源地址https://www.toymoban.com/news/detail-736066.html

到了这里,关于UI界面开发- android studio搭建类微信界面的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Android Studio Kotlin 简单实现微信主界面UI

                            windows11                         文件版本 2023.2.0.0                         产品版本 2023.2.0.AI-232.10227.8.2321._BUILD_NUMBER_         JAVA属性:                          java version \\\"17.0.10\\\" 2024-01-16 LTS       

    2024年04月16日
    浏览(61)
  • 【移动开发学习】 Android Studio 编写一个简单的微信界面

    Android Studio简单还原微信ui 目标 实现3-4个tab的切换效果 技术需求 activity, xml, fragment, recyclerview 成果展示 其中联系人界面通过recyclerview实现了可以滑动列表           仓库地址 https://github.com/SmileEX/wecaht.git 实现过程 主要ui 第一步我们首先把微信的ui主体做出来,即这三个部分

    2024年02月08日
    浏览(66)
  • 【移动开发学习】 Android Studio 编写一个简单的微信界面 (2)

    Android Studio简单还原微信ui 上一期完成内容(前情提要) 上次我们简单地实现了微信的几个初始界面,并且在联系人页面通过recycleview添加了许多的view 目标 建立在上次的基础上,我们来扩展联系人界面的功能,给每一个view添加一个点击功能,让其可以跳转到另一个activity,

    2024年02月05日
    浏览(64)
  • Android studio界面ui优化

    记录一下对毕设界面的优化 效果图: 方法:创建xml文件,然后引用该xml文件: 有时候下边框可以直接用view实现,我是因为不想把tablelayout改成linearlayout所以没用这个方法 view方法: 背景透明并取消阴影 效果图: 点击按钮变色 效果图 同样创建xml文件 然后在代码块中设置点

    2024年02月13日
    浏览(38)
  • Android studio - UI 界面设计(仿问卷星登陆注册界面)

    1 先上效果图: 2 准备工作 建如下活动文件以及素材文件 3 代码实现 3.1 修改themes.xml、 themes.xml(night)文件 使自定义按钮组件起效果 代码实现 btn_login.xml button_lg.xml button_res.xml 3.2 实现布局 3.2.1 登陆界面 activity_login.xml 3.2.2 注册界面 activity_register.xml 4 按钮实现页面跳转 4.1 Logi

    2024年02月11日
    浏览(60)
  • Android Studio的新界面New UI,怎么切换回老界面

    最近更新了Android Studio,发现界面风格不一样了,有点像Windows 11的风格,详见图片 不习惯,还是习惯老界面,菜单File-Setting,在Setting界面将Enable new UI的勾去掉,点OK,重启Android Studio,熟悉的界面又回来了。

    2024年02月19日
    浏览(41)
  • Android Studio 制作微信界面 下

         上一篇文章的链接: Android Studio 制作微信界面 上_nazonomaster的博客-CSDN博客 https://blog.csdn.net/nazonomaster/article/details/124456716                 首先是WeixinFragment.java                 在包内创建一个名为fragment的文件夹,在该文件夹中创建新的Java类并命名为

    2024年02月09日
    浏览(48)
  • Android Studio 制作微信,登入界面,输入密码界面,跳转手机登录界面,以及聊天界面

    2.打开Android Studio。 3.选择 \\\"Create New Project\\\"。 4.在 \\\"Create New Project\\\" 对话框中,输入项目名称、选择存储位置等信息。 5.选择最低支持的Android版本,并选择一个适合的活动模板(例如,Empty Activity)。 6.点击 \\\"Finish\\\" 创建新的Android项目。 8.打开 \\\"activity_main.xml\\\" 文件,该文件用于定

    2024年02月07日
    浏览(44)
  • 蓝牙聊天App设计1:Android Studio制作蓝牙聊天通讯软件(UI界面设计)

    前言:蓝牙聊天App设计全部有三篇文章(一、UI界面设计,二、蓝牙搜索配对连接实现,三、蓝牙连接聊天),这篇文章是一、UI界面设计 课程1:Android Studio小白安装教程,以及第一个Android项目案例“Hello World”的调试运行 课程2:蓝牙聊天App设计1:Android Studio制作蓝牙聊天通

    2024年02月02日
    浏览(55)
  • android studio——设计简单微信界面超详细教程

    一、作业目标 本次作业开发的是微信APP的门户框架,UI布局为上中下结构。 功能一:用户可通过点击底部导航栏切换四个板块进行切换,它们分别是“聊天”、“联系人”、“功能”、“我的”,每切换一个界面会有对应的文本提示。 功能二:在每一tab页面实现列表效果。

    2024年02月04日
    浏览(68)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包