安卓开发——微信UI界面

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

一、功能说明

本次作业开发的是类似微信的主页面框架,UI布局为上中下结构,用户可通过点击底部导航栏切换板块内容,其中共包含四个板块,分别是“微信”、“通讯录”、“发现”和“我的”。

二、设计流程

2.1 页面设计

微信的界面布局分为上中下三个部分。

(1)第一部分,主要是显示界面的标题。

(2)第二部分,主要是“微信”、“通讯录”、“发现”和“我的”四个板块的具体内容。

(3)第三部分,主要是“微信”、“通讯录”、“发现”和“我的”四个板块的切换控件。

2.2 功能设计

实现点击底部控件切换到对应的板块界面。

(1)创建Fragment类及其对应的layout文件

(2)创建FragmentManager管理Fragment,以及FragmentTransaction

(3)设置监听

(4)设置控件被点击后的响应事件

三、核心代码详解

3.1 界面布局代码

3.1.1 总体布局 activity_main.xml

   ·<!--界面顶部-->
    <include layout="@layout/top"></include>

    <!--界面中部-->
    <FrameLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"></FrameLayout>

    <!--界面底部-->
    <include layout="@layout/bottom"></include>

<include>标签可以实现在一个layout文件中引用另一个layout文件的布局

此处则是在activity_main.xml文件中引入了top.xml文件和bottom.xml文件的布局

在FrameLayout中设置属性layout_weight=1可将FrameLayout填满界面中除了top和bottom的中间部分。

3.1.2 界面顶部 top.xml

<TextView
        android:id="@+id/top_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:text="微信"
        android:textSize="40sp" />

3.1.3 界面中部

<?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=".Fragmentxx">

    <TextView
        android:id="@+id/content1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:text="这是消息界面"
        android:textSize="50sp" />
    
</FrameLayout>

该部分的布局文件共有四个,分别是fra_xx.xml、fra_lx.xml、fra_fx.xml、fra_wd.xml

代码大致相同,只需修改对应的Fragment类和组件id即可

3.1.4 界面底部 bottom.xml

<LinearLayout
        android:id="@+id/l_xiaoxi"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical"
        android:layout_marginTop="15dp">

        <ImageView
            android:id="@+id/image_xiaoxi"
            android:layout_width="wrap_content"
            android:layout_height="60dp"
            app:srcCompat="@drawable/xiaoxi" />

        <TextView
            android:id="@+id/text_xiaoxi"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="微信"
            android:textSize="30sp" />
    </LinearLayout>

 界面底部的布局稍微复杂一点,布局解释如下:

(1)最外层是一个水平的LinearLayout,使得放在里面的组件可水平放置

(2)第二层是四个垂直的LinearLayout,使得放在里面的组件可垂直放置,并且通过layout_weight将此四个LinearLayout组件均分其父布局,即每个组件占父布局的1/4。

(3)对于(2)中的每个LinearLayout都有一个ImageView和TextView,详细代码如上。

另外,ImageView组件所使用的图片需存放在/res/drawable文件夹中。

 

3.2 点击按钮跳转板块功能代码

Fragmentxx、Fragmentlx、Fragmentfx和Fragmentwd类的主要代码:

public class Fragmentxx extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fra_xx, container, false);
    }
}

 Fragmentlx、Fragmentfx和Fragmentwd与上述部分的代码基本一致,主要区别在于R.layout._____  部分需对应其对应的layout文件

MainActivity类的主要代码:

 FragmentManager

FragmentManager manager;
manager=getSupportFragmentManager();

Fragment对象

Fragment fragment1,fragment2,fragment3,fragment4;
fragment1=new Fragmentxx();
fragment2=new Fragmentlx();
fragment3=new Fragmentfx();
fragment4=new Fragmentwd();

 LinearLayout对象,对应的id是bottom.xml文件中的第二层LinearLayout的id

LinearLayout linearLayout1,linearLayout2,linearLayout3,linearLayout4;
linearLayout1=findViewById(R.id.l_xiaoxi);
linearLayout2=findViewById(R.id.l_lianxi);
linearLayout3=findViewById(R.id.l_faxian);
linearLayout4=findViewById(R.id.l_wode);

Transaction对象

    FragmentTransaction transaction;
    //初始化,将所有fragment都添加到界面中部板块
    //对应的id是activity_main.xml中的Fragment的id
    public void inital(){
        transaction=manager.beginTransaction()
                .add(R.id.content,fragment1)
                .add(R.id.content,fragment2)
                .add(R.id.content,fragment3)
                .add(R.id.content,fragment4);
        transaction.commit();
    }
    //将所有的fragment隐藏起来
    public void fragmentHide(){
        transaction=manager.beginTransaction()
                .hide(fragment1)
                .hide(fragment2)
                .hide(fragment3)
                .hide(fragment4);
        transaction.commit();
    }
    //将指定的fragment进行展示
    public void fragmentShow(Fragment fragment){
        transaction=manager.beginTransaction().show(fragment);
        transaction.commit();
    }

从上述代码中可以看到最终四个板块的布局文件时如何添加到主布局中间的空板块的:

(1)首先通过Fragmentxx类绑定板块对应的布局文件fra_xx.xml;

(2)然后在MainActivity类中创建Fragmentxx对象;

(3)最后通过Transaction将Fragmentxx对象添加到主布局中间的空板块。

 图片和文字颜色的改变

//定义组件对应的变量
TextView t1,t2,t3,t4;
ImageView im1,im2,im3,im4;
t1=findViewById(R.id.text_xiaoxi);
t2=findViewById(R.id.text_lianxi);
t3=findViewById(R.id.text_faxian);
t4=findViewById(R.id.text_wode);
im1=findViewById(R.id.image_xiaoxi);
im2=findViewById(R.id.image_lianxi);
im3=findViewById(R.id.image_faxian);
im4=findViewById(R.id.image_wode);
    //将指定图片和文字设置为灰色
    public void defaultImagendText(){
        im1.setImageResource(R.drawable.xiaoxi);
        im2.setImageResource(R.drawable.lianxi);
        im3.setImageResource(R.drawable.faxian);
        im4.setImageResource(R.drawable.wode);
        t1.setTextColor(Color.parseColor("#8a8a8a"));
        t2.setTextColor(Color.parseColor("#8a8a8a"));
        t3.setTextColor(Color.parseColor("#8a8a8a"));
        t4.setTextColor(Color.parseColor("#8a8a8a"));
    }

 监听设置如下:

public class MainActivity extends AppCompatActivity implements View.OnClickListener
linearLayout1.setOnClickListener(this);
linearLayout2.setOnClickListener(this);
linearLayout3.setOnClickListener(this);
linearLayout4.setOnClickListener(this);

 点击按钮后的响应事件,响应逻辑如下:

(1)点击后,先将所有图片和文字变成灰色,中间板块的内容也进行隐藏

(2)通过监听获取组件id

(3)根据获取得到的id,展示对应的板块,并且被点击的图片和文字颜色变绿

    public void onClick(View v) {
        fragmentHide();
        defaultImagendText();
        switch (v.getId())
        {
            case R.id.l_xiaoxi:
                fragmentShow(fragment1);
                im1.setImageResource(R.drawable.xiaoxi_click);
                t1.setTextColor(Color.parseColor("#04BE02"));
                break;
            case R.id.l_lianxi:
                fragmentShow(fragment2);
                im2.setImageResource(R.drawable.lianxi_click);
                t2.setTextColor(Color.parseColor("#04BE02"));
                break;
            case R.id.l_faxian:
                fragmentShow(fragment3);
                im3.setImageResource(R.drawable.faxian_click);
                t3.setTextColor(Color.parseColor("#04BE02"));
                break;
            case R.id.l_wode:
                fragmentShow(fragment4);
                im4.setImageResource(R.drawable.wode_click);
                t4.setTextColor(Color.parseColor("#04BE02"));
                break;
        };
    }

四、总结

4.1 运行结果展示

安卓开发——微信UI界面 安卓开发——微信UI界面 安卓开发——微信UI界面 安卓开发——微信UI界面

4.2 小结

通过本次作业练习掌握了一些安卓UI界面开发的基础知识,一开始由于组件有点多加上自己还不是很熟悉安卓UI界面的一些布局属性所以还有点云里雾里,在博客中对这些代码又重新梳理了一遍,感觉才好了些,总之收获还是很大的!

五、源码开源地址

HW_WeChat: Android 学习 (gitee.com)文章来源地址https://www.toymoban.com/news/detail-449682.html

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

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

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

相关文章

  • Android开发-UI界面--类微信页面设计

    一、功能说明 二、开发技术 ​ 本次用到了 layout.xml、控件、监听、fragment layout(布局) ​ 定义了用户界面的可视化结构,主要有4种布局: ConstrainLayout (约束布局):一个使用“相对定位”灵活地确定微件的位置和大小的一个布局 LinearLayout (线性布局):按照水平或垂直

    2024年02月10日
    浏览(41)
  • 微信在线订票小程序源码开发功能说明

    在我们的日常生活中,为了满足人们的出行,各行各业都做了微信小程序开发,旅游业为了更好的服务客户,让客户有更好的体验,也推出了相应的微信在线订票小程序。 微信订票小程序的优势是什么?现如今使用微信用户过亿,微信为了方便用户的使用推出小程序这种轻应

    2024年02月08日
    浏览(35)
  • 微信小程序原生开发功能合集十二:编辑界面的实现

      本章实现编辑界面的实现处理,包括各编辑组件的使用及添加数据保存数据流程的实现处理。   另外还提供小程序开发基础知识讲解课程,包括小程序开发基础知识、组件封装、常用接口组件使用及常用功能实现等内容,具体如下:    1. CSDN课程: https://edu.csdn.ne

    2024年02月02日
    浏览(61)
  • 【Unity】实用功能开发(一)实现在UI中用RawImage实时展示3D模型(背景透明,并通过UI防止3D场景遮挡)并可以通过分层完成:游戏中的人物状态展示界面,小地图,人物实时头像状态等功能

    有时由于项目效果需要,部分功能的实现受到阻碍,这里收集一些已实现的思路和方法,每次会记录大致需求和遇到的问题,如果有更好的想法,欢迎评论区讨论!!! 目录 功能描述: 需求描述: 实现步骤: ①为需要展示的内容区分层级: ②在场景中添加一个摄像机,并

    2024年02月04日
    浏览(48)
  • UI界面视觉设计之字体要素--安卓-ios-网页常用字体

     怎么设计出从而设计出富有美感和形式感的优秀作品? 1.设计经验的积累。 2. 在每个项目设计中只使用1到2个字体样式,通过对字体大小或颜色来强调重点文案,如图的界面设计中,都是通过字体大小、粗细来区分界面内容中的层级关系。字体用得越多,越显得不够专业;

    2024年02月05日
    浏览(71)
  • Stable Diffuse 之 安装文件夹、以及操作界面 UI 、Prompt相关说明

    目录 Stable Diffuse 之 安装文件夹、以及操作界面 UI 、Prompt相关说明 一、简单介绍 二、安装文件相关说明 三、界面的简单说明 四、prompt 的一些语法简单说明 1、Prompt :正向提示词 ,用文字描述在图像中出现的内容 2、Negative prompt:负面提示词,用文字描述不想在图像中出现

    2024年02月09日
    浏览(40)
  • Android大作业:安卓开发图书管理系统APP

    Android Studio开发项目图书管理系统项目视频展示: 点击进入图书管理系统项目视频 现在是一个信息高度发达的时代,伴随着科技的进步,文化的汲取,人们对于图书信息的了解与掌握也达到了一定的高度。尤其是学生对于知识的渴求更是与日俱增。图书馆作为学生学习知识的

    2024年02月07日
    浏览(63)
  • 安卓大作业(AndroidStudio开发)日记记事本app

    博主介绍: 本人专注于Android/java/数据库/微信小程序技术领域的开发,以及有好几年的计算机毕业设计方面的实战开发经验和技术积累;尤其是在安卓(Android)的app的开发和微信小程序的开发,很是熟悉和了解;本人也是多年的Android开发人员;希望我发布的此篇文件可以帮

    2024年02月11日
    浏览(54)
  • Android安卓开发大作业---模拟电影票小程序APP

    完整项目结构: 登录注册UI设计: 登录成功跳转个人信息界面: 签到功能: 电影主页: (上下图片可以左右滑动查看热映电影) 查看所有热映电影: (可以上下滑动) 选择一部电影查看详细信息: 点击购票: 选位置: (左上角会出现一个定位预览界面,高度还原小程序

    2024年02月04日
    浏览(134)
  • MySql5.6版本开启慢SQL功能-本次采用永久生效方式

    开启 MySQL 的慢查询日志(Slow Query Log)可以帮助你分析和优化数据库中的慢查询语句。通过记录执行时间超过阈值的 SQL 查询,慢查询日志能够提供以下用途: 性能优化 : 慢查询日志能够帮助你找出执行时间较长的 SQL 查询语句,以及执行次数较多的查询。通过分析这些慢查

    2024年02月16日
    浏览(44)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包