android 仿微信demo————微信主界面实现
Posted 你要永远相信光z
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了android 仿微信demo————微信主界面实现相关的知识,希望对你有一定的参考价值。
android 仿微信demo————注册功能实现(移动端)
android 仿微信demo————注册功能实现(服务端)
android 仿微信demo————登录功能实现(移动端)
android 仿微信demo————登录功能实现(服务端)
android 仿微信demo————微信消息界面实现(移动端)
android 仿微信demo————微信消息界面实现(服务端)
android 仿微信demo————微信通讯录界面功能实现(移动端,服务端)
android 仿微信demo————微信顶部操作栏界面实现
android 仿微信demo————微信顶部操作栏搜索按钮实现(查询通讯录好友功能)
android 仿微信demo————微信顶部操作栏加号按钮实现(弹出子菜单)
以往文章中实现微信启动页,登录注册功能,此基础上继续完善仿微信功能。
主界面实现
(1)整体采用RelativeLayout相对布局
(2)最上面是toolbar操作栏,搜索框SearchView,Overflow(含有4个单选菜单项)
(3)中间使用Fragment组件(不使用ViewPager,有兴趣可以自己添加实现下)。
(4)最下面是水平的LinearLayout线性布局:含有4个自定义的控件
这一篇主要是实现主界面,其他像顶部(toolbar,SearchView,Overflow),中间的fragment,后续文章在更新。
创建主界面activity MainWeixin.java
MainWeixin.java
package com.example.wxchatdemo;
import android.annotation.SuppressLint;
import android.app.AlertDialog;
import android.app.Dialog;
import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.content.DialogInterface;
import android.content.Intent;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.view.KeyEvent;
import android.view.View;
import android.view.Window;
import android.widget.ImageView;
import android.widget.TextView;
public class MainWeixin extends FragmentActivity implements View.OnClickListener {
private WeixinFragment firstFragment = null;// 用于显示微信界面
private ContactListFragment secondFragment = null;// 用于显示通讯录界面
private FindFragment thirdFragment = null;// 用于显示发现界面
private SelfFragment fourthFragment = null;// 用于显示我界面
private View firstLayout = null;// 微信显示布局
private View secondLayout = null;// 通讯录显示布局
private View thirdLayout = null;// 发现显示布局
private View fourthLayout = null;// 我显示布局
/*声明组件变量*/
private ImageView weixinImg = null;
private ImageView contactImg = null;
private ImageView findImg = null;
private ImageView selfImg = null;
private TextView weixinText = null;
private TextView contactText = null;
private TextView findText = null;
private TextView selfText = null;
private FragmentManager fragmentManager = null;// 用于对Fragment进行管理
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);//要求窗口没有title
super.setContentView(R.layout.main_weixin);
// 初始化布局元素
initViews();
fragmentManager = getFragmentManager();//用于对Fragment进行管理
// 设置默认的显示界面
setTabSelection(0);
}
/**
* 在这里面获取到每个需要用到的控件的实例,并给它们设置好必要的点击事件
*/
@SuppressLint("NewApi")
public void initViews() {
fragmentManager = getFragmentManager();
firstLayout = findViewById(R.id.weixin_layout);
secondLayout = findViewById(R.id.contacts_layout);
thirdLayout = findViewById(R.id.find_layout);
fourthLayout = findViewById(R.id.self_layout);
weixinImg = (ImageView) findViewById(R.id.weixin_img);
contactImg = (ImageView) findViewById(R.id.contact_img);
findImg = (ImageView) findViewById(R.id.find_img);
selfImg = (ImageView) findViewById(R.id.self_img);
weixinText = (TextView) findViewById(R.id.weixin_text);
contactText = (TextView) findViewById(R.id.contact_text);
findText = (TextView) findViewById(R.id.find_text);
selfText = (TextView) findViewById(R.id.self_text);
//处理点击事件
firstLayout.setOnClickListener(this);
secondLayout.setOnClickListener(this);
thirdLayout.setOnClickListener(this);
fourthLayout.setOnClickListener(this);
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.weixin_layout:
setTabSelection(0);// 当点击了微信时,选中第1个tab
break;
case R.id.contacts_layout:
setTabSelection(1);// 当点击了通讯录时,选中第2个tab
break;
case R.id.find_layout:
setTabSelection(2);// 当点击了发现时,选中第3个tab
break;
case R.id.self_layout:
setTabSelection(3);// 当点击了我时,选中第4个tab
break;
default:
break;
}
}
/**
* 根据传入的index参数来设置选中的tab页 每个tab页对应的下标。0表示微信,1表示通讯录,2表示发现,3表示我
*/
@SuppressLint("NewApi")
private void setTabSelection(int index) {
clearSelection();// 每次选中之前先清除掉上次的选中状态
FragmentTransaction transaction = fragmentManager.beginTransaction();// 开启一个Fragment事务
hideFragments(transaction);// 先隐藏掉所有的Fragment,以防止有多个Fragment显示在界面上的情况
switch (index) {
case 0:
// 当点击了我的微信tab时改变控件的图片和文字颜色
weixinImg.setImageResource(R.drawable.tab_weixin_pressed);//修改布局中的图片
weixinText.setTextColor(Color.parseColor("#0090ff"));//修改字体颜色
if (firstFragment == null) {
/*获取登录activity传过来的微信号*/
Intent intent = getIntent();
String number = intent.getStringExtra("weixin_number");
// 如果FirstFragment为空,则创建一个并添加到界面上
firstFragment = new WeixinFragment(number);
transaction.add(R.id.fragment, firstFragment);
} else {
// 如果FirstFragment不为空,则直接将它显示出来
transaction.show(firstFragment);//显示的动作
}
break;
// 以下和firstFragment类同
case 1:
contactImg.setImageResource(R.drawable.tab_address_pressed);
contactText.setTextColor(Color.parseColor("#0090ff"));
if (secondFragment == null) {
/*获取登录activity传过来的微信号*/
Intent intent = getIntent();
String number = intent.getStringExtra("weixin_number");
secondFragment = new ContactListFragment(number);
transaction.add(R.id.fragment, secondFragment);
} else {
transaction.show(secondFragment);
}
break;
case 2:
findImg.setImageResource(R.drawable.tab_find_frd_pressed);
findText.setTextColor(Color.parseColor("#0090ff"));
if (thirdFragment == null) {
thirdFragment = new FindFragment();
transaction.add(R.id.fragment, thirdFragment);
} else {
transaction.show(thirdFragment);
}
break;
case 3:
selfImg.setImageResource(R.drawable.tab_settings_pressed);
selfText.setTextColor(Color.parseColor("#0090ff"));
if (fourthFragment == null) {
fourthFragment = new SelfFragment();
transaction.add(R.id.fragment, fourthFragment);
} else {
transaction.show(fourthFragment);
}
break;
}
transaction.commit();
}
/**
* 清除掉所有的选中状态
*/
private void clearSelection() {
weixinImg.setImageResource(R.drawable.tab_weixin_normal);
weixinText.setTextColor(Color.parseColor("#82858b"));
contactImg.setImageResource(R.drawable.tab_address_normal);
contactText.setTextColor(Color.parseColor("#82858b"));
findImg.setImageResource(R.drawable.tab_find_frd_normal);
findText.setTextColor(Color.parseColor("#82858b"));
selfImg.setImageResource(R.drawable.tab_settings_normal);
selfText.setTextColor(Color.parseColor("#82858b"));
}
/**
* 将所有的Fragment都设置为隐藏状态 用于对Fragment执行操作的事务
*/
@SuppressLint("NewApi")
private void hideFragments(FragmentTransaction transaction) {
if (firstFragment != null) {
transaction.hide(firstFragment);
}
if (secondFragment != null) {
transaction.hide(secondFragment);
}
if (thirdFragment != null) {
transaction.hide(thirdFragment);
}
if (fourthFragment != null) {
transaction.hide(fourthFragment);
}
}
//封装一个AlertDialog
private void exitDialog() {
Dialog dialog = new AlertDialog.Builder(this)
.setTitle("温馨提示")
.setMessage("您确定要退出程序吗?")
.setPositiveButton("关闭微信", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface arg0, int arg1) {
finish();
}
})
.setNegativeButton("取消", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface arg0, int arg1) {
}
}).create();
dialog.show();//显示对话框
}
/**
* 返回菜单键监听事件
*/
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_BACK) {//如果是返回按钮
exitDialog();
}
return super.onKeyDown(keyCode, event);
}
}
创建主界面activity MainWeixin.java对应的主布局文件main_weixin.xml
main_weixin.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="@+id/fragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white">
</FrameLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_alignParentBottom="true"
android:background="#f7f7f7"
android:gravity="center"
android:orientation="horizontal">
<LinearLayout
android:id="@+id/weixin_layout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_centerVertical="true"
android:layout_weight="1"
android:orientation="vertical"
android:padding="3dp">
<ImageView
android:id="@+id/weixin_img"
android:layout_width="wrap_content"
android:layout_height="24dp"
android:layout_gravity="center_horizontal"
android:src="@drawable/tab_weixin_pressed" />
<TextView
android:id="@+id/weixin_text"
android:layout_width="wrap_content"
android:layout_height="20dp"
android:layout_gravity="center_horizontal"
android:gravity="top"
android:text="微信"
android:textColor="#82858b"
android:textSize="13dp" />
</LinearLayout>
<LinearLayout
android:id="@+id/contacts_layout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_centerVertical="true"
android:layout_weight="1"
android:orientation="vertical"
android:padding="3dp">
<ImageView
android:id="@+id/contact_img"
android:layout_width="wrap_content"
android:layout_height="24dp"
android:layout_gravity="center_horizontal"
android:src="@drawable/tab_address_normal" />
<TextView
android:id="@+id/contact_text"
android:layout_width="wrap_content"
android:layout_height="20dp"
android:layout_gravity="center_horizontal"
android:gravity="top以上是关于android 仿微信demo————微信主界面实现的主要内容,如果未能解决你的问题,请参考以下文章
android 仿微信demo——持续更新(实现移动端,服务端)
Android Fragment+NestedRadioGroup仿微信主界面(带底部图标切换页面无滑动)