安卓之软件界面

最新推荐文章于 2024-05-15 06:16:04 发布
最新推荐文章于 2024-05-15 06:16:04 发布
阅读量574 收藏 1
点赞数 1
分类专栏： 安卓 文章标签： android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44075044/article/details/109089272
版权

安卓开发之类微信界面

微信主界面：实现点击按钮切换不同界面

1.采用整体linearlayout的整体布局
2.头部采用linearlayout布局，内含textview控件
3.中部显示主界面采用fremwork布局
4.底部采用linearlayout设计，内含imgbutton、textview等控件

首先在androidstudio中新建一个项目，选择empty activity,等待项目构建完成，一个微信类聊天界面主要分为头部标题名称，中间显示内容，底部布局按钮切换界面这三个部分

【顶部设计】

在layout文件夹新建一个top.xml文件，将textview控件拖入其中，
在这里插入图片描述
设置linearlayout布局以及textview控件属性
在这里插入图片描述

<?xml version="1.0" encoding="utf-8"?> 

<TextView
    android:id="@+id/textView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:text="@string/app_name"
    android:textColor="#ffffff"
    android:textSize="20sp" />

【底部设计】

新建一个buttom.xml文件，将布局文件orientation属性设置为horizontal即水平的，在布局文件中添加四个linearlayout布局控件将orientation属性设置为vertical，并在四个linearlayout分别添加ImgButton和TextView控件，并设置相关属性

<?xml version="1.0" encoding="utf-8"?> 

<LinearLayout
    android:id="@+id/id_weixin"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:gravity="center"
    android:layout_weight="1"
    android:orientation="vertical">

    <ImageButton
        android:id="@+id/img_weixin"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:contentDescription="@string/app_name"
        tools:srcCompat="@drawable/tab_weixin_normal" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:text="微信"
        android:textSize="15sp" />
</LinearLayout>

<LinearLayout
    android:id="@+id/id_firends"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:gravity="center"
    android:orientation="vertical">

    <ImageButton
        android:id="@+id/img_friends"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:contentDescription="@string/app_name"
        tools:srcCompat="@drawable/normal1" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:text="朋友"
        android:textSize="15sp" />
</LinearLayout>

<LinearLayout
    android:id="@+id/id_link"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:gravity="center"
    android:orientation="vertical">

    <ImageButton
        android:id="@+id/img_link"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:contentDescription="@string/app_name"
        tools:srcCompat="@drawable/normal2" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:text="联系人"
        android:textSize="15sp" />
</LinearLayout>

<LinearLayout
    android:id="@+id/id_set"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:gravity="center"
    android:orientation="vertical">

    <ImageButton
        android:id="@+id/img_set"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:contentDescription="@string/app_name"
        tools:srcCompat="@drawable/normal3" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:text="设置"
        android:textSize="15sp" />
</LinearLayout>

在res文件夹下的drawable文件夹中准备一些设计图标的图片
效果：

在这里插入图片描述

【中部设计】

新建四个xml文件，这四个文件就是切换不同界面时要显示的内容，
这四个文件为显示的内容
往其中添加textview控件
在这里插入图片描述
设置布局属性

<?xml version="1.0" encoding="utf-8"?> 

<TextView
    android:id="@+id/textView6"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:text="这是朋友圈界面"
    android:textSize="25sp" />

启动界面即activity_main.xml文件设置
主界面布局文件的设置，在这里我们要设置好刚刚设置好的三个部分的xml文件将头部，底部，中部组合成一个完整的界面，首先往其中添加一个framelayout布局，这个是用于存放中部四个不同的界面的xml文件，因为头部和下面的按钮布局一般是不变的，点击按钮变换的主要是中间这部分的显示内容然后在文件中引入头部布局文件与下部的点击切换布局文件
在这里插入图片描述
设置frameLayout控件属性使布局合理显示并设置id：
在这里插入图片描述

头部与尾部的布局我们已经设置好，直接使用include分别在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/id_fragment"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="@drawable/singht">

    </FrameLayout>

    <include layout="@layout/buttom" />
</LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>
显示效果：
在这里插入图片描述

到这里布局就基本结束了

【设置点击按扭时不同界面的显示】

上面我们已经设置了页面的布局，但是却没有实现点击按钮页面就切换的效果，接下来我们打开MainActivity.java这个文件进行代码编写
首先我们要给中部的framelayout控件压入四个布局文件，在java文件夹新建四个blank类型的fragment文件，
在这里插入图片描述
在四个fragment文件中将要实例化的布局文件转换成我们已经编写好的四个布局文件，改变其中的参数
将布局文件改为我们编写好

为什么要这么做呢？因为我们是无法直接操作xml文件的，这样做相当于把这四个布局文件进行实例化我们可以直接对这四个文件执行操作，比如将他们在特定的时候进行显示或隐藏等操作

【编写MainActivity.java】

编写MainActivity.java文件
编写函数将四个界面添加到fragment中，

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    private Fragment fragment1= new weixinFragment();//分别将四个fragment类实例化
    private Fragment fragment2=new friendsFragment();
    private Fragment fragment3= new linklistFragment();
    private Fragment fragment4= new settingFragment();
    private FragmentManager fm;//声明控件
    private LinearLayout mweixin;
    private LinearLayout mfriends;
    private LinearLayout mlinklist;
    private LinearLayout msetting;
    private ImageButton first1;
    private ImageButton first2;
    private ImageButton first3;
    private ImageButton first4;
    //将四个fragment添加至framework组件中
     public void initFragment(){
        fm = getFragmentManager();
        FragmentTransaction transaction=fm.beginTransaction();
        transaction.add(R.id.id_fragment,fragment1);
        transaction.add(R.id.id_fragment,fragment2);
        transaction.add(R.id.id_fragment,fragment3);
        transaction.add(R.id.id_fragment,fragment4);
        transaction.commit();}

编写初始化控件函数

public void initView(){
        mweixin=(LinearLayout) findViewById(R.id.id_weixin);
        mfriends=(LinearLayout) findViewById(R.id.id_firends);
        mlinklist=(LinearLayout) findViewById(R.id.id_link);
        msetting=(LinearLayout) findViewById(R.id.id_set);
        first1=(ImageButton)findViewById(R.id.img_weixin);
        first2=(ImageButton)findViewById(R.id.img_friends);
        first3=(ImageButton)findViewById(R.id.img_link);
        first4=(ImageButton)findViewById(R.id.img_set);
    }

编写相应监听事件，就是当我们点击不同按钮是显示不同的界面，给事件绑定相应函数

public void initEvent(){
        first1.setOnClickListener(this);
        first2.setOnClickListener(this);
        first3.setOnClickListener(this);
        first4.setOnClickListener(this);
        //msetting.setOnClickListener(this);
    }

编写一个当点击不同按钮时展示不同界面的函数

public void selectFragment(int i){
        FragmentTransaction transaction=fm.beginTransaction();
        hideFragment(transaction);
        resetimg();
        switch (i){
            case 0:
                transaction.show(fragment1);
                first1.setImageResource(R.drawable.tab_weixin_pressed);
                break;
            case 1:
                transaction.show(fragment2);
                first2.setImageResource(R.drawable.press1);
                break;
            case 2:
                transaction.show(fragment3);
                first3.setImageResource(R.drawable.press2);
                break;
            case 3:
                transaction.show(fragment4);
                first4.setImageResource(R.drawable.press3);
                break;
            default:
                break;

        }
        transaction.commit();
    }

设置按钮图片

 public void resetimg(){
        first1.setImageResource(R.drawable.tab_weixin_normal);
        first2.setImageResource(R.drawable.normal1);
        first3.setImageResource(R.drawable.normal2);
        first4.setImageResource(R.drawable.normal3);
    }

整个代码：

package com.example.mywechat;

import androidx.appcompat.app.AppCompatActivity;
import android.app.Fragment;

import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.view.SurfaceControl;
import android.view.View;
import android.view.Window;

import android.os.Bundle;
import android.widget.Button;
import android.widget.ImageButton;
import android.widget.LinearLayout;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    private Fragment fragment1= new weixinFragment();
    private Fragment fragment2=new friendsFragment();
    private Fragment fragment3= new linklistFragment();
    private Fragment fragment4= new settingFragment();
    private FragmentManager fm;
    private LinearLayout mweixin;
    private LinearLayout mfriends;
    private LinearLayout mlinklist;
    private LinearLayout msetting;
    private ImageButton first1;
    private ImageButton first2;
    private ImageButton first3;
    private ImageButton first4;

    public void initView(){
        mweixin=(LinearLayout) findViewById(R.id.id_weixin);
        mfriends=(LinearLayout) findViewById(R.id.id_firends);
        mlinklist=(LinearLayout) findViewById(R.id.id_link);
        msetting=(LinearLayout) findViewById(R.id.id_set);
        first1=(ImageButton)findViewById(R.id.img_weixin);
        first2=(ImageButton)findViewById(R.id.img_friends);
        first3=(ImageButton)findViewById(R.id.img_link);
        first4=(ImageButton)findViewById(R.id.img_set);
    }

    public void initFragment(){
        fm = getFragmentManager();
        FragmentTransaction transaction=fm.beginTransaction();
        transaction.add(R.id.id_fragment,fragment1);
        transaction.add(R.id.id_fragment,fragment2);
        transaction.add(R.id.id_fragment,fragment3);
        transaction.add(R.id.id_fragment,fragment4);
        transaction.commit();

    }
    public void hideFragment(FragmentTransaction transaction){
        transaction.hide(fragment1);
        transaction.hide(fragment2);
        transaction.hide(fragment3);
        transaction.hide(fragment4);
    }
    public void resetimg(){
        first1.setImageResource(R.drawable.tab_weixin_normal);
        first2.setImageResource(R.drawable.normal1);
        first3.setImageResource(R.drawable.normal2);
        first4.setImageResource(R.drawable.normal3);
    }
    public void selectFragment(int i){
        FragmentTransaction transaction=fm.beginTransaction();
        hideFragment(transaction);
        resetimg();
        switch (i){
            case 0:
                transaction.show(fragment1);
                first1.setImageResource(R.drawable.tab_weixin_pressed);
                break;
            case 1:
                transaction.show(fragment2);
                first2.setImageResource(R.drawable.press1);
                break;
            case 2:
                transaction.show(fragment3);
                first3.setImageResource(R.drawable.press2);
                break;
            case 3:
                transaction.show(fragment4);
                first4.setImageResource(R.drawable.press3);
                break;
            default:
                break;

        }
        transaction.commit();
    }

源码：
项目源码

不想思考的程序员
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
MainActivity2.java
10-21
两个页面之间跳转
android找main程序,找MainActivity
weixin_34597791的博客
05-27 4817
什么是MainActivity，就是一个Android的APP 如果它有Activity的话，那么最开始启动的那个Activity就是MainActivity。每一个组件，包括Activity都必须要在AndroidManifest.xml文件中申明。如果是MainActivity的话，那么就会有下面这两个特征：我们随便找了两个APP的AndroidManifest.xml文件看一看 在Main...
2024年安卓最全25个Android酷炫开源UI框架，带你全面掌握高级知识点英文
2401_84558498的博客
05-15 1324
对程序员来说，很多技术的学习都是“防御性”的。也就是说，我们是在为未来学习。我们学习新技术的目的，或是为了在新项目中应用，或仅仅是为了将来的面试。但不管怎样，一定不能“止步不前”，不能荒废掉。!文章以下内容会给出阿里与美团的面试题（答案+解析）、面试题库、Java核心知识点梳理等网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化学习资料的朋友，可以戳这里获取一个人可以走的很快，但一群人才能走的更远！
mainActivity.java作用_android开发笔记：MainActivity.java与activity_main.xml
weixin_36328527的博客
02-13 8202
前言刚开始开发android的时候，新建一个activity总是会新建两个文件，我们已默认命名MainActivity.java与activity_main.xml两个文件来给大家介绍。activity_main.xmllayout就是布局，所以activity_main.xml其实就是一个布局文件。何为布局文件：我们拖的各种各样的控件在上面，系统就会自动帮我们生成xml代码。那能怎么用，拖在上面...
记录Android自学（1）- MainActivity
青寻№的博客
12-07 2698
如何创建与设置MainActivity
Android(6) —— 主函数的详解 MainActivity.java
magic_ll的博客
10-21 6717
1 代码讲解 1.1 代码概述 该脚定义了在安卓端上实现神经网络（图片分类）的移植的主函数。是通过定义了public class ClassifyLib 来实现的。会调用Classify.java、PhotoUtil.java两个脚本（这两个脚本前面的博客有详细的讲解） 先定义了类内的所需变量 public class MainActivity extends AppCompatActivity { private static final String TAG = MainActivity.c
Android 安卓局域网视频聊天软件
10-03
在Android平台上开发一款局域网视频聊天软件，如"Android 安卓局域网视频聊天软件"，涉及多个关键技术点，这些技术对于构建一个高效、稳定且用户友好的应用程序至关重要。下面将详细介绍其中的关键知识点： 1. **...
Android用户注册界面
01-05
先给大家展示下界面效果图，感觉满意，请参考实现代码。 Main.xml源码 <?xml version=1.0 encoding=utf-8?> <TableLayout xmlns:android=http://schemas.android.com/apk/res/android android:layout_...
Android软件开发之盘点界面五大布局源码
08-03
在Android软件开发中，界面设计是用户体验的关键因素之一。本文将深入探讨Android界面设计中的五大布局，即LinearLayout、RelativeLayout、GridLayout、FrameLayout和ConstraintLayout。这些布局各有特点，适用于...
功能强大的登录界面Android实现代码
01-05
前言 ...看着csdn上的大牛们的文章，心里想着也写一个登录界面学习学习，许多东西都是参考别的文章，综合起来的。...RelativeLayout xmlns:android=http://schemas.android.com/apk/res/android xmlns:tools=http:
安卓应用程序完整项目代码：Android 登录界面Demo源码
最新发布
06-24
在安卓应用开发中，创建一个用户友好的登录界面是至关重要的。这个项目代码"Android登录界面Demo源码"提供了一个完整的实例，展示了如何在Android平台上构建一个基础的登录功能。以下将详细介绍在这个Demo中涉及的...
Android之MainActivity类
weixin_30762087的博客
11-27 1510
一、MainActivity: 1、每个种语言都有一个程序入库（如：C#main函数），而Android程序的入口就是Mani Actiivty函数。 2、Activity是Android的核心类（android.app.Activity）,在Activity类有onCreate事件方法，一般用于对Activity进行初始化，并且通过setContentVi...
android四大组件——活动(Activity)详解
无忧少年的博客
08-07 3057
四大组件——活动(Activity) @author 无忧少年 @createTime 2021/08/07 首先介绍一个下活动这个组件吧，毕竟我看打开一个app最先看到的就是页面了，这部分和用户的交互体验息息相关 1.认识Activity ​ 首先得介绍一下这个组件————活动(Activity)是 最容易吸引用户的地方，它是一种可以包含用户界面的组件，主要用于和用户进行交互。一个应用程序中可以包含零个或者多个活动，但不包含任何活动的应用程序很少见，谁也不想让自己的应用永远无法被用户看到吧。 ​ 之前
Android基础笔记：（1）四大组件 Activity 详解【更新结束】
weixin_45995894的博客
08-10 1557
Activity是Android的四大组件之一。作用：显示界面，用户通过Activity实现交互操作，一个App一般由多个Activity组成。AndroidManifest.xml又被称为清单文件，它是整个程序的根目录，用于定义Activity，service，广播等组件。决定程序最先启动的Activity：
Android Studio 的main activity
m0_72716610的博客
05-04 1824
在 onCreate() 方法中，你通常会在 setContentView() 方法中传入一个 R.layout.xxx 布局文件来设置 Activity 的布局。在 onCreate() 方法中，你可以设置 Activity 的布局，获取 Intent 中的参数，初始化变量等。onClick() 方法：这个方法用于处理控件的点击事件。导入包：在 Java 文件的顶部，你会看到一些 import 语句，这些语句用于导入 Android 库和其他 Java 库，这样就可以在代码中使用这些库的类和方法。
android开发笔记：MainActivity.java与activity_main.xml
热门推荐
chengde6896383的专栏
10-14 1万+
https://www.jianshu.com/p/f5e56fb2f215 刚开始开发android的时候，新建一个activity总是会新建两个文件，我们已默认命名MainActivity.java与activity_main.xml两个文件来给大家介绍。 activity_main.xml layout就是布局，所以activity_main.xml其实就是一个布局文件。何为布局文...
手动创建Activity
weixin_44384601的博客
03-02 314
手动创建Activity 新建类继承Activity或其子类 在AndroidManifest,ml文件中声明新建的Activity <activity android:name=".TestActivity" /> 创建layout文件，在Activity的onCreate文件中设置对应的layout public class TestActivity extends A...
Activity生命周期
爱优学的博客
03-28 690
做Android开发也有一段时间了，但是我自我感觉自己的水平也仅仅是一般。前段时间拜读了任玉刚老师的《Android开发艺术探索》，顿时感觉自己真的是一个小白，就连平时常用的Activity的生命周期甚至都没有清晰的认识。下面这篇文章主要讲解Activity各种情况下的生命周期，如果哪位前辈觉得我哪点说的不正确，还请留言指正。1.正常情况下Activity的生命周期这里首先需要明确一下，什么才叫“...
Activity基础编程
qq_60600802的博客
12-28 1009
android studio练习登陆页面及简单响应
安卓软件界面旋转如何实现的
06-02
安卓软件界面的旋转可以通过以下两种方式实现： 1. 在AndroidManifest.xml文件中添加如下代码： ``` android:name=".MainActivity" android:configChanges="orientation|screenSize"> ``` 这样就可以在...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值