Android Studio 开发之类微信界面的开发

Android 入门之类微信界面的开发

  本文以一个案例的形式，介绍了如何使用Android Studio软件来进行Android 开发。
  开发环境：Android Studio、Android SDK 10.0

开发步骤
1.编写布局文件
top.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="45dp"
    android:layout_gravity="center_horizontal"
    android:gravity="center"
    android:orientation="vertical"
    android:background="#372c2c">


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"

        android:text="@string/app_name"
        android:textColor="#fff"
        android:textSize="26sp" />

</LinearLayout>

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"
    android:layout_width="match_parent"
    android:layout_height="70dp"
    android:background="@drawable/bottom_bar"
    android:orientation="horizontal"
    android:baselineAligned="false">


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

        <ImageButton
            android:id="@+id/id_tab_weixin_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#252A2C"
            android:clickable="false"
            app:srcCompat="@drawable/tab_weixin_pressed"
            android:contentDescription="@string/app_name" />

        <TextView
            android:id="@+id/textView1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="@string/weixin"
            android:textColor="#fff"
            android:textSize="18sp" />
    </LinearLayout>
    <LinearLayout
        android:id="@+id/id_tab_frd"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:gravity="center"
        android:layout_weight="1"
        android:orientation="vertical">

        <ImageButton
            android:id="@+id/id_tab_frd_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#252A2C"
            android:clickable="false"
            app:srcCompat="@drawable/tab_find_frd_normal"
            android:contentDescription="@string/app_name" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="@string/frd"
            android:textColor="#fff"
            android:textSize="18sp" />
    </LinearLayout>
    <LinearLayout
        android:id="@+id/id_tab_address"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:gravity="center"
        android:layout_weight="1"
        android:orientation="vertical">

        <ImageButton
            android:id="@+id/id_tab_address_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#252A2C"
            android:clickable="false"
            app:srcCompat="@drawable/tab_address_normal"
            android:contentDescription="@string/app_name" />

        <TextView
            android:id="@+id/textView3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="@string/address"
            android:textColor="#fff"
            android:textSize="18sp" />
    </LinearLayout>
    <LinearLayout
        android:id="@+id/id_tab_settings"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:gravity="center"
        android:layout_weight="1"
        android:orientation="vertical">

        <ImageButton
            android:id="@+id/id_tab_settings_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#252A2C"
            android:clickable="false"
            app:srcCompat="@drawable/tab_settings_normal"
            android:contentDescription="@string/app_name" />

        <TextView
            android:id="@+id/textView4"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="@string/settings"
            android:textColor="#fff"
            android:textSize="18sp" />
    </LinearLayout>
</LinearLayout>

activity_main.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="match_parent"
    android:orientation="vertical">

    <include layout="@layout/top" />

    <FrameLayout
        android:id="@+id/id_content"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">


    </FrameLayout>

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

4个中间部分的切换页面（以tab01.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="match_parent"
    android:orientation="vertical">

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:gravity="center"
        android:text="@string/hello_blank_fragment"
        android:textSize="25sp" />
</LinearLayout>

2.编写java文件

编写用于点击底部的布局切换中间显示内容的4个Fragment类（以一个为例）

package com.example.wechat;

//此类自动生成 直接新建一个blank 的Fragment 即可
import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;


/**
 * A simple {@link Fragment} subclass.
 */
public class weixinFragment extends Fragment {


    public weixinFragment() {
        // Required empty public constructor
    }


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

}

编写MainActivity.java(用于整合转换为java类的控件)

package com.example.wechat;


import android.app.Fragment;
import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.widget.ImageButton;
import android.widget.LinearLayout;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
	//四个底部的线性布局
    private LinearLayout mTabWeixin;
    private LinearLayout mTabFrd;
    private LinearLayout mTabAddress;
    private LinearLayout mTabSettings;
	//四个底部线性布局里面的ImgButton
    private ImageButton mImgWeixin;
    private ImageButton mImgFrd;
    private ImageButton mImgAddress;
    private ImageButton mImgSettings;

	//四个fragment，用于显示四个按钮点击后出现的文字效果
    private Fragment mTab01 = new weixinFragment();
    private Fragment mTab02 = new frdFragment();
    private Fragment mTab03 = new addressFragment();
    private Fragment mTab04 = new settingsFragment();

    private FragmentManager fm;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);

        initView();
        initFragment();
        initEvent();
        setSelect(0);
    }

	//将四个fragment 加到 FrameLayout里面
    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(){
        mTabWeixin=findViewById(R.id.id_tab_weixin);
        mTabFrd=findViewById(R.id.id_tab_frd);
        mTabAddress=findViewById(R.id.id_tab_address);
        mTabSettings=findViewById(R.id.id_tab_settings);

        mImgWeixin=findViewById(R.id.id_tab_weixin_img);
        mImgFrd=findViewById(R.id.id_tab_frd_img);
        mImgAddress=findViewById(R.id.id_tab_address_img);
        mImgSettings=findViewById(R.id.id_tab_settings_img);

    }
	//只对mTabWeixin、mTabFrd、mTabAddress、mTabSettings进行监听;否则为全屏监听，优化了程序
    private void initEvent(){
        mTabWeixin.setOnClickListener(this);
        mTabFrd.setOnClickListener(this);
        mTabAddress.setOnClickListener(this);
        mTabSettings.setOnClickListener(this);
    }


	//当鼠标单击某一图标时该图标变绿，且其余图标为白色
    private void setSelect(int i){
        FragmentTransaction transaction=fm.beginTransaction();
        hideFragment(transaction);//先隐藏所有的fragment
        switch (i){
            case 0:
                transaction.show(mTab01);
                mImgWeixin.setImageResource(R.drawable.tab_weixin_pressed);//点击weixin图标时，图标变绿
                break;
            case 1:
                transaction.show(mTab02);
                mImgFrd.setImageResource(R.drawable.tab_find_frd_pressed);
                break;
            case 2:
                transaction.show(mTab03);
                mImgAddress.setImageResource(R.drawable.tab_address_pressed);
                break;
            case 3:
                transaction.show(mTab04);
                mImgSettings.setImageResource(R.drawable.tab_settings_pressed);
                break;
            default:
                break;
        }
        transaction.commit();
    }
	//隐藏所有的fragment
    private void hideFragment(FragmentTransaction transaction){
        transaction.hide(mTab01);
        transaction.hide(mTab02);
        transaction.hide(mTab03);
        transaction.hide(mTab04);
    }
	//实现接口View.OnClickListener的onclick方法
	//将界面上的用于点击的布局的id与对应的图片显示绑定
    @Override
    public void onClick(View view) {
        resetImg();//鼠标点击后先将所有的图片重置
        switch (view.getId()){
            case R.id.id_tab_weixin:
                setSelect(0);
                break;
            case R.id.id_tab_frd:
                setSelect(1);
                break;
            case R.id.id_tab_address:
                setSelect(2);
                break;
            case R.id.id_tab_settings:
                setSelect(3);
                break;
            default:
                break;
        }
    }
//所有图片重置为白色，表示未选中
    private void resetImg() {
        mImgWeixin.setImageResource(R.drawable.tab_weixin_normal);
        mImgFrd.setImageResource(R.drawable.tab_find_frd_normal);
        mImgAddress.setImageResource(R.drawable.tab_address_normal);
        mImgSettings.setImageResource(R.drawable.tab_settings_normal);

    }
}

编码于此就大功告成了，不过还遇到了以下的问题：
1.android:gravity="center"可以使元素居中，但是好像layout_gravity不行
2.andorid布局文件里面的app:srcCompat设置的图片显示不出来，解决方案为Activity 继承AppcompatActivity  (https://blog.csdn.net/jtoozc/article/details/78549261)
3.需要将xml里面的4个ImgButton 添加clickable=false,才能够实现点击imgButton的图片能够跳转的功能

源码地址：(https://gitee.com/caikangle/caikangle)