一、功能需求

完成一个类似微信页面的布局，要求：

页面最上方是标题居中
页面中间界面显示内容，内容随下方栏的选择而切换
页面最下方有四个按钮
点击按钮后，按钮图标会变换颜色，且显示框变换内容

项目大致框架如下：

二、页面布局

顶部和底部

1.head.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="wrap_content"><TextViewandroid:id="@+id/textView"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_weight="1"android:background="@color/black"android:text="微信"android:textAlignment="center"android:textColor="@color/white"android:textSize="30sp" />
</LinearLayout>

2.bottom.xml

<?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"xmlns:tools="http://schemas.android.com/tools"android:id="@+id/layout_all"android:layout_width="match_parent"android:layout_height="wrap_content"><LinearLayoutandroid:id="@+id/layout1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_weight="1"android:orientation="vertical"><ImageViewandroid:id="@+id/chat"android:layout_width="100dp"android:layout_height="106dp"app:srcCompat="@drawable/chat_normal"tools:ignore="ImageContrastCheck" /><TextViewandroid:id="@+id/textView1"android:layout_width="match_parent"android:layout_height="wrap_content"android:text="微信"android:textAlignment="center" /></LinearLayout><LinearLayoutandroid:id="@+id/layout2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_weight="1"android:orientation="vertical"><ImageViewandroid:id="@+id/imageView2"android:layout_width="100dp"android:layout_height="106dp"app:srcCompat="@drawable/people_normal" /><TextViewandroid:id="@+id/textView2"android:layout_width="match_parent"android:layout_height="wrap_content"android:text="联系人"android:textAlignment="center" /></LinearLayout><LinearLayoutandroid:id="@+id/layout3"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_weight="1"android:orientation="vertical"><ImageViewandroid:id="@+id/imageView3"android:layout_width="100dp"android:layout_height="106dp"app:srcCompat="@drawable/find_normal" /><TextViewandroid:id="@+id/textView3"android:layout_width="match_parent"android:layout_height="wrap_content"android:text="发现"android:textAlignment="center" /></LinearLayout><LinearLayoutandroid:id="@+id/layout4"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_weight="1"android:orientation="vertical"><ImageViewandroid:id="@+id/imageView4"android:layout_width="100dp"android:layout_height="104dp"app:srcCompat="@drawable/personal_normal" /><TextViewandroid:id="@+id/textView4"android:layout_width="122dp"android:layout_height="wrap_content"android:text="我的"android:textAlignment="center" /></LinearLayout>
</LinearLayout>

效果如下：

三、四个内容区

fragment 和xml ,下面用的是chat为例

package com.example.wechat;
import android.view.LayoutInflater;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.fragment.app.Fragment;import androidx.fragment.app.Fragment;public class chatfragment extends Fragment {public chatfragment(){}@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {// Inflate the layout for this fragmentreturn inflater.inflate(R.layout.chat, container, false);}
}

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:id="@+id/fragment_chat"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"tools:context=".chatfragment"><!-- TODO: Update blank fragment layout --><TextViewandroid:id="@+id/textView_chat"android:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center"android:text="聊天界面"android:textSize="30sp" /></LinearLayout>

四、编写main 的activity和xml

package com.example.wechat;import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentTransaction;
import androidx.fragment.app.FragmentManager;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import androidx.appcompat.app.AppCompatActivity;public class MainActivity extends AppCompatActivity implements View.OnClickListener {private FragmentManager fm = getSupportFragmentManager();private LinearLayout linearLayout1, linearLayout2, linearLayout3, linearLayout4;private ImageView imageView1,imageView2,imageView3,imageView4;private Fragment chatfragment = new chatfragment();private Fragment peoplefragment = new peoplefragment();private Fragment findfragment = new findfragment();private Fragment personalFragment = new personfragment();@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);initFragment();initImageView();showFragment(0);linearLayout1.setOnClickListener(this);linearLayout2.setOnClickListener(this);linearLayout3.setOnClickListener(this);linearLayout4.setOnClickListener(this);}private void initFragment() {FragmentTransaction transaction = fm.beginTransaction();transaction.add(R.id.fragment_content, chatfragment);transaction.add(R.id.fragment_content, peoplefragment);transaction.add(R.id.fragment_content, findfragment);transaction.add(R.id.fragment_content, personalFragment);transaction.commit();}private void initImageView() {imageView1 = findViewById(R.id.chat);imageView2 = findViewById(R.id.imageView2);imageView3 = findViewById(R.id.imageView3);imageView4 = findViewById(R.id.imageView4);linearLayout1 = findViewById(R.id.layout1);linearLayout2 = findViewById(R.id.layout2);linearLayout3 = findViewById(R.id.layout3);linearLayout4 = findViewById(R.id.layout4);}private void hideFragment(FragmentTransaction transaction) {transaction.hide(chatfragment);transaction.hide(personalFragment);transaction.hide(findfragment);transaction.hide(personalFragment);}@Overridepublic void onClick(View view) {FragmentTransaction fragmentTransaction = fm.beginTransaction();hideFragment(fragmentTransaction);resetImg();switch (view.getId()) {case R.id.layout1:showFragment(0);break;case R.id.layout2:showFragment(1);break;case R.id.layout3:showFragment(2);break;case R.id.layout4:showFragment(3);break;default:break;}}private void resetImg() {    //调用灰色的图片，以让点击过后的图片回复原色imageView1.setImageResource(R.drawable.chat_normal);imageView2.setImageResource(R.drawable.people_normal);imageView3.setImageResource(R.drawable.find_normal);imageView4.setImageResource(R.drawable.personal_normal);}private void showFragment(int i) {    //控制图片颜色的变换，其意义是点击一个图片之后该图片就会变亮FragmentTransaction transaction = fm.beginTransaction();hideFragment(transaction);switch (i) {case 0:transaction.show(chatfragment);imageView1.setImageResource(R.drawable.chat_active);break;case 1:transaction.show(peoplefragment);imageView2.setImageResource(R.drawable.people_active);break;case 2:transaction.show(findfragment);imageView3.setImageResource(R.drawable.find_active);break;case 3:transaction.show(personalFragment);imageView4.setImageResource(R.drawable.personal_active);break;default:break;}transaction.commit();}
}

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"android:orientation="vertical"tools:context=".MainActivity"><include layout="@layout/head" /><FrameLayoutandroid:id="@+id/fragment_content"android:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1"></FrameLayout><include layout="@layout/bottom"android:gravity="bottom"/>
</LinearLayout>

最终的效果

gitee仓库地址

wechat 界面 · 935be06 · 吉吉的耳朵不太好/Wechat - Gitee.com

安卓开发之设计微信界面相关推荐

安卓移动开发实验：Android Studio设计微信界面
一.实验的目的通过使用Android Studio的Fragment和layout,来实现简单的微信界面切换. 二.app的功能能够通过应用底部的bottom来实现四个页面的来回切换. 三.实验过 ...
安卓开发Java版——UI界面的设计
UI界面设计常见控件使用方法 TextView android:background 背景颜色 android:layout_width和android:layout_height指定了控件的宽度和 ...
安卓开发之集成微信登录以及分享群聊，朋友圈功能。
准备工作先申请应用的各种ID,官网地址:https://open.weixin.qq.com 集成添加依赖. implementation 'com.tencent.mm.opensdk:wech ...
安卓开发_自定义控件_界面的简单侧滑
主界面 package com.itheima.news;import android.os.Bundle; import android.app.Activity; import android.v ...
安卓开发淘宝抢购界面！史上最全的Android面试题集锦，附带学习经验
前言这是"拔剑金九银十"的第二篇文章,本文主要针对3年以上的Android开发者进阶面试中高级开发工程师而整理. 希望可以对你们有所帮助.不多废话,进入正题. 目录: Java中 ...
Android安卓开发集成微信第三方扫描二维码登录-超级无敌具详细
Android安卓开发中集成微信二维码登录的步骤: 写在前面的: 该教程使用AS作为演示,使用ecplise请参照微信官方文档下载相应jar等所需参考文档和资源.在最后,我会附上这个Activity的 ...
android 多界面开发,安卓开发教程（Android多界面应用程序开发）
安卓开发教程(Android多界面应用程序开发) 开篇本文阅读需10分钟,简单易上手,属于安卓开发教程的基础部分. 建议精读,深刻理解大意.多做实践.多写代码. 本文章由做全栈攻城狮原创首发. 同名 ...
安卓移动开发技术--微信界面设计
1.内容:请根据课程实现App门户界面框架设计,至少包含4个tab页,能实现tab页之间的点击切换: 2.技术:使用布局和分段,对控件进行点击监听实现界面展示: 一.界面布局分析 1.先对butto ...
安卓开发微信ui界面设计（Android Studio）
功能: 开发一个类似微信的主页面框架,UI布局为上中下结构,包含4个tab界面: 开发技术为: layout xml.控件.监听,fragment: 设计流程: 创建项目改下项目名,编程语言为jav ...

安卓开发之设计微信界面

一、功能需求

二、页面布局

顶部和底部

三、四个内容区

fragment 和xml ,下面用的是chat为例

四、编写main 的activity和xml

最终的效果

gitee仓库地址

安卓开发之设计微信界面相关推荐

最新文章

热门文章