Android简易微信界面

专选课移动互联网开发的第一次作业，利用Android Studio进行了简易Android微信界面的搭建
完整项目代码

界面样式展示：
界面xml源码

主界面xml源码

<?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"><include layout="@layout/top" /><FrameLayoutandroid:id="@+id/id_content"android:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1"></FrameLayout><includelayout="@layout/button"/></LinearLayout>

button 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:layout_width="match_parent"android:baselineAligned="false"android:background="@drawable/bottom_bar"android:layout_height="100dp"><LinearLayoutandroid:id="@+id/id_tab_wechat"android:layout_width="0dp"android:layout_height="wrap_content"android:layout_weight="1"android:background="@drawable/bottom"android:orientation="vertical"><ImageButtonandroid:id="@+id/id_tab_wechat_image"android:layout_width="match_parent"android:layout_height="53dp"android:background="#000000"android:contentDescription="@string/app_name"android:clickable="false"android:src="@drawable/tab_weixin_pressed" /><TextViewandroid:id="@+id/id_tab_wechat_text"android:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:text="微信"android:clickable="false"android:textColor="#ffffff"android:textSize="25dp" /></LinearLayout><LinearLayoutandroid:id="@+id/id_tab_friend"android:layout_width="0dp"android:layout_height="wrap_content"android:layout_weight="1"android:background="@drawable/bottom_bar"android:orientation="vertical"><ImageButtonandroid:id="@+id/id_tab_friend_image"android:layout_width="match_parent"android:layout_height="53dp"android:background="#000000"android:contentDescription="@string/app_name"android:clickable="false"android:src="@drawable/tab_find_frd_normal" /><TextViewandroid:id="@+id/id_tab_friend_text"android:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:text="朋友"android:textColor="#ffffff"android:clickable="false"android:textSize="25dp" /></LinearLayout><LinearLayoutandroid:id="@+id/id_tab_contact"android:layout_width="0dp"android:layout_height="wrap_content"android:layout_weight="1"android:background="@drawable/bottom_bar"android:orientation="vertical"><ImageButtonandroid:id="@+id/id_tab_contact_image"android:layout_width="match_parent"android:layout_height="53dp"android:background="#000000"android:contentDescription="@string/app_name"android:clickable="false"android:src="@drawable/tab_address_normal" /><TextViewandroid:id="@+id/id_tab_contact_text"android:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:text="通讯录"android:textColor="#ffffff"android:clickable="false"android:textSize="25dp" /></LinearLayout><LinearLayoutandroid:id="@+id/id_tab_settings"android:layout_width="0dp"android:layout_height="87dp"android:layout_weight="1"android:background="@drawable/bottom_bar"android:orientation="vertical"><ImageButtonandroid:id="@+id/id_tab_settings_image"android:layout_width="match_parent"android:layout_height="53dp"android:background="#000000"android:contentDescription="@string/app_name"android:clickable="false"android:src="@drawable/tab_settings_normal" /><TextViewandroid:id="@+id/id_tab_settings_text"android:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:text="设置"android:clickable="false"android:textColor="#ffffff"android:textSize="25dp" /></LinearLayout>
</LinearLayout>

TOP标题源码

<?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="65dp"android:gravity="center"android:background="#000000"android:orientation="vertical"><TextViewandroid:id="@+id/textView"android:layout_width="wrap_content"android:layout_height="wrap_content"android:gravity="center_horizontal"android:text="@string/app_name"android:textColor="#ffffff"android:textSize="20sp" />
</LinearLayout>

后台JAVA源码
分别创建四个页面的fragment

package com.example.mywechat;import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;import android.app.Fragment;/*** A simple {@link Fragment} subclass.*/
public class contactFragment extends Fragment {public contactFragment() {// Required empty public constructor}@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {// Inflate the layout for this fragmentreturn inflater.inflate(R.layout.tab03, container, false);}}

利用main_activity实现fragment之间的切换

package com.example.mywechat;import android.app.Activity;
import android.os.Bundle;
import android.view.SurfaceControl;
import android.view.Window;
import android.view.View;
import android.app.FragmentManager;
import android.app.Fragment;
import android.app.FragmentTransaction;
import android.widget.ImageButton;
import android.widget.LinearLayout;public class MainActivity extends Activity implements View.OnClickListener{private Fragment mTab01=new WechatFragment();private Fragment mTab02=new friendFragment();private Fragment mTab03=new contactFragment();private Fragment mTab04=new settingsFragment();private FragmentManager fm;LinearLayout mTabWechat;LinearLayout mTabFriend;LinearLayout mTabContact;LinearLayout mTabSettings;ImageButton mimgWechat;ImageButton mimgFriend;ImageButton mimgContact;ImageButton mimgSettings;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);requestWindowFeature(Window.FEATURE_NO_TITLE);setContentView(R.layout.activity_main);initFragment();initView();selectfragment(0);initEvent();}private void initEvent(){mTabWechat.setOnClickListener(this);mTabFriend.setOnClickListener(this);mTabContact.setOnClickListener(this);mTabSettings.setOnClickListener(this);}private void initFragment(){fm = getFragmentManager();FragmentTransaction transaction=fm.beginTransaction();transaction.add(R.id.id_content,mTab01);transaction.add(R.id.id_content,mTab02);transaction.add(R.id.id_content,mTab03);transaction.add(R.id.id_content,mTab04);transaction.commit();}private void initView(){mTabWechat=findViewById(R.id.id_tab_wechat);mTabFriend = findViewById(R.id.id_tab_friend);mTabContact = findViewById(R.id.id_tab_contact);mTabSettings = findViewById(R.id.id_tab_settings);mimgWechat = findViewById(R.id.id_tab_wechat_image);mimgFriend = findViewById(R.id.id_tab_friend_image);mimgContact = findViewById(R.id.id_tab_contact_image);mimgSettings = findViewById(R.id.id_tab_settings_image);}private void hideFragment(FragmentTransaction transaction){transaction.hide(mTab01);transaction.hide(mTab02);transaction.hide(mTab03);transaction.hide(mTab04);}private void resetImgs(){mimgWechat.setImageResource(R.drawable.tab_weixin_normal);mimgFriend.setImageResource(R.drawable.tab_find_frd_normal);mimgContact.setImageResource(R.drawable.tab_address_normal);mimgSettings.setImageResource(R.drawable.tab_settings_normal);}private void selectfragment(int i){FragmentTransaction transaction=fm.beginTransaction();hideFragment(transaction);switch (i){case 0:transaction.show(mTab01);mimgWechat.setImageResource(R.drawable.tab_weixin_pressed);break;case 1:transaction.show(mTab02);mimgFriend.setImageResource(R.drawable.tab_find_frd_pressed);break;case 2:transaction.show(mTab03);mimgContact.setImageResource(R.drawable.tab_address_pressed);break;case 3:transaction.show(mTab04);mimgSettings.setImageResource(R.drawable.tab_settings_pressed);break;default:break;}transaction.commit();}public void onClick(View v){resetImgs();switch (v.getId()){case R.id.id_tab_wechat:selectfragment(0);break;case R.id.id_tab_friend:selectfragment(1);break;case R.id.id_tab_contact:selectfragment(2);break;case R.id.id_tab_settings:selectfragment(3);break;}}
}

作业心得
根据老师课程内容完成了代码的复现，理解了后台代码利用fragment进行切换以及根据点击事件更改图片样式的思路，但是对于布局的xml代码有些地方比较模糊，在布局方面耗费了一些时间，例如设置weight=1，height=0来调节布局的技巧就不能很好的理解。还是需要更多的项目进行锻炼，不断摸索。

Android简易微信界面相关推荐

Android studio设计一个简易微信界面
一.设计要求及实现构想 1.设计一个简易微信界面框架,包含至少4个tab页面(我设计的4个分别为message.contact.find.config),要求能实现四个页面之间的点击切换. 2.首先分 ...
使用AS自制简易微信界面
文章目录一.设计目标二.功能说明三.代码解析 1. layout文件夹头部标签栏底部(四个按钮) 中间信息栏主界面布局 2. drawable文件夹 3.java文件夹 Fragment ...
Android之微信界面设计
Android Studio 学习之实现微信首页界面一.界面布局分析. 首先进行界面布局,看需要几个.xml文件. 1.top.xml对微信界面的顶部进行设计 2.bottom.xml对于微信界面的 ...
Android studio 微信界面设计
一.微信界面的功能 1.可展示出四个可切换界面:微信.联系人.朋友圈.设置: 2.上方栏标题居中,界面中间显示内容,内容随下方栏的选择而切换,下方栏可点击切换,点击过的界面的图标为绿色,没有点击的界面 ...
Android Studio 微信界面开发——主页面框架
目录功能说明设计流程核心代码详解总结源码开源地址(gitee) 一.功能说明类似微信界面的设计.本次主要进行初步设计,完成微信页面的基础框架,即当点击下方按钮时,页面随之转换,分别包括&q ...
android studio微信界面设计,android studio开发微信界面
android studio开发微信界面 android studio开发微信界面功能说明:主要是做微信的简单的聊天界面,利用Fragment,进行微信界面的跳转项目代码: 源代码地址 MainA ...
Android 实现微信界面
设计思路: 1)程序总体使用TabHost实现微信界面的四个模块,在每一个tab选项布局里使用自定义的ListView,添加ImageView和TextView控件,显示通讯录列表信息. 2)自定义L ...
Android Studio制作简易微信界面
文章目录制作要求一.top,buttom页面制作二.四个tab页面和activity_main页面制作 1.四个tab页面 2.activity_main页面三 . 五个java文件制作要求 ...
Android仿微信界面
效果图原理介绍 1.先绘制一个颜色(例如:粉红) 2.设置Mode=DST_IN 3.绘制我们这个可爱的小机器人回答我,显示什么,是不是显示交集,交集是什么?交集是我们的小机器人的非透明区域,也就 ...

Android简易微信界面

Android简易微信界面

Android简易微信界面相关推荐

最新文章

热门文章