Android学习之微信界面的模仿实现

参考自：http://www.cnblogs.com/lichenwei/

模仿微信界面的实现我是使用Fragment固定界面的方式来实现的，主要用到的布局方式有LinearLayout和FrameLayout

1、界面分析（效果图）

 

 

2、界面布局的具体实现

布局文件：

activity_top.xml（顶部布局）

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="55dp"
    android:background="@drawable/title_tab"
    android:gravity="center">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/title_name"
        android:textSize="24dp"/>

</LinearLayout>

activity_bottom.xml（底部布局）

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="45dp"
    android:background="@drawable/title_tab">

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

        <ImageView
            android:layout_weight="1"
            android:id="@+id/ic_1"
            android:src="@drawable/find_normal"
            android:layout_width="wrap_content"
            android:layout_height="match_parent" />
        <TextView
            android:id="@+id/textview_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="11dp"
            android:textColor="@color/colorTextViewNormal"
            android:text="@string/find_text"/>
    </LinearLayout>

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

        <ImageView
            android:layout_weight="1"
            android:id="@+id/ic_2"
            android:src="@drawable/wechat_normal"
            android:layout_width="wrap_content"
            android:layout_height="match_parent" />
        <TextView
            android:id="@+id/textview_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="11dp"
            android:textColor="@color/colorTextViewNormal"
            android:text="@string/wechat_text"/>
    </LinearLayout>

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

        <ImageView
            android:layout_weight="1"
            android:id="@+id/ic_3"
            android:src="@drawable/me_normal"
            android:layout_width="wrap_content"
            android:layout_height="match_parent" />
        <TextView
            android:id="@+id/textview_3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="11dp"
            android:textColor="@color/colorTextViewNormal"
            android:text="@string/me_text"/>
    </LinearLayout>
</LinearLayout>

activity_main.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"
    tools:context="com.example.administrator.attendancesystem.MainActivity">

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

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


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

fragment_1.xml（fragment_2.xml和fragment_3.xml类似）

<FrameLayout 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"
    tools:context=".Fragment_1">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="this is first fragment" />

</FrameLayout>

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
    <color name="colorTextViewNormal">#7F7F7F</color>
    <color name="colorTextViewPress">#1B940A</color>
</resources>
 

3、具体代码实现

Fragment1.java（Fragment2.java和Fragment2.java一样）

package com.example.administrator.attendancesystem;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

/**
 * A simple {@link Fragment} subclass.
 */
public class Fragment_1 extends Fragment {
    
    public Fragment_1() {
        // 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.fragmen_1, container, false);
    }

}

MainActivity.java

package com.example.administrator.attendancesystem;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivityextends AppCompatActivityimplements View.OnClickListener {

    //Fragment
    privateFragment fragment_first;
    private Fragment fragment_second;
    private Fragment_3 fragment_third;

    //底端菜单栏LinearLayout
    privateLinearLayout linear_first;
    private LinearLayoutlinear_second;
    private LinearLayoutlinear_third;

    //底端菜单栏Imageview
    privateImageView iv_first;
    private ImageView iv_second;
    private ImageView iv_third;

    //底端菜单栏textView
    privateTextView tv_first;
    private TextView tv_second;
    private TextView tv_third;

    @Override
    protected voidonCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //初始化各个控件
        InitView();

        //初始化点击触发事件
        InitEvent();

        //初始化Fragment
        InitFragment(1);

        //将第一个图标设置为选中状态
        iv_first.setImageResource(R.drawable.find_select);
        tv_first.setTextColor(getResources().getColor(R.color.colorTextViewPress));
    }

    private void InitView(){

        linear_first = (LinearLayout) findViewById(R.id.line1);
        linear_second = (LinearLayout) findViewById(R.id.line2);
        linear_third = (LinearLayout) findViewById(R.id.line3);

        iv_first = (ImageView) findViewById(R.id.ic_1);
        iv_second = (ImageView) findViewById(R.id.ic_2);
        iv_third= (ImageView) findViewById(R.id.ic_3);

        tv_first = (TextView) findViewById(R.id.textview_1);
        tv_second = (TextView) findViewById(R.id.textview_2);
        tv_third = (TextView) findViewById(R.id.textview_3);

    }

    private void InitFragment(intindex){
        //v4包下的Fragment，使用getSupportFragmentManager获取
        FragmentManager fragmentManager = getSupportFragmentManager();
        //启动事务
        android.support.v4.app.FragmentTransaction transaction = fragmentManager.beginTransaction();

        //将所有的Fragment隐藏
        hideAllFragment(transaction);
        switch (index){
            case 1:
                if (fragment_first== null){
                    fragment_first = new Fragment_1();
                    transaction.add(R.id.frame_content,fragment_first);
                }
                else{
                    transaction.show(fragment_first);
                }
                break;

            case 2:
                if (fragment_second== null){
                    fragment_second = new Fragment_2();
                    transaction.add(R.id.frame_content,fragment_second);
                }
                else{
                    transaction.show(fragment_second);
                }
                break;

            case 3:
                if (fragment_third== null){
                    fragment_third = new Fragment_3();
                    transaction.add(R.id.frame_content,fragment_third);
                }
                else{
                    transaction.show(fragment_third);
                }
                break;

        }
        //提交事务
        transaction.commit();
    }
    private void InitEvent(){
        //设置LinearLayout监听
        linear_first.setOnClickListener(this);
        linear_second.setOnClickListener(this);
        linear_third.setOnClickListener(this);
    }

    @Override
    public voidonClick(View view) {

        //每次点击之后，将所有的ImageView和TextView设置为未选中
        restartButton();
        //再根据所选，进行跳转页面，并将ImageView和TextView设置为选中
        switch(view.getId()){
            case R.id.line1:
                Toast.makeText(MainActivity.this,"first", Toast.LENGTH_SHORT).show();
                iv_first.setImageResource(R.drawable.find_select);
                tv_first.setTextColor(getResources().getColor(R.color.colorTextViewPress));
                InitFragment(1);
                break;

            case R.id.line2:
                iv_second.setImageResource(R.drawable.wechat_select);
                tv_second.setTextColor(getResources().getColor(R.color.colorTextViewPress));
                InitFragment(2);
                break;

            case R.id.line3:
                iv_third.setImageResource(R.drawable.me_select);
                tv_third.setTextColor(getResources().getColor(R.color.colorTextViewPress));
                InitFragment(3);
                break;
        }
    }

    //隐藏所有的Fragment
    private voidhideAllFragment(android.support.v4.app.FragmentTransaction transaction){
        if (fragment_first!= null){
            transaction.hide(fragment_first);
        }

        if (fragment_second!= null){
            transaction.hide(fragment_second);
        }

        if (fragment_third!= null){
            transaction.hide(fragment_third);
        }

       // transaction.commit();
    }

    //重新设置ImageView和TextView的状态
    private voidrestartButton(){
        //设置为未点击状态
        iv_first.setImageResource(R.drawable.find_normal);
        iv_second.setImageResource(R.drawable.wechat_normal);
        iv_third.setImageResource(R.drawable.me_normal);

        //设置为灰色
        tv_first.setTextColor(getResources().getColor(R.color.colorTextViewNormal));
        tv_second.setTextColor(getResources().getColor(R.color.colorTextViewNormal));
        tv_third.setTextColor(getResources().getColor(R.color.colorTextViewNormal));
    }
}

 点击下载源代码