Android简易微信界面

Android简易微信界面

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

1. 界面样式展示：
   
2. 界面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" />

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


    </FrameLayout>

    <include
        layout="@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">

    <LinearLayout
        android: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">


        <ImageButton
            android: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" />

        <TextView
            android: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>

    <LinearLayout
        android: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">


        <ImageButton
            android: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" />

        <TextView
            android: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>

    <LinearLayout
        android: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">


        <ImageButton
            android: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" />

        <TextView
            android: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>

    <LinearLayout
        android: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">


        <ImageButton
            android: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" />

        <TextView
            android: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">

    <TextView
        android: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>

3. 后台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
    }


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return 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;

    @Override
    protected 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;

        }
    }
}

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