天天看點

仿的微信總結

看了鴻洋大神做的微信5.1版本的東西,自己模仿着做了一下,現在總結一下。

有相應的代碼,可以下載下傳

微信的第一個RelativeLayout

在裡面攝者一個LinearLayout寬度設定為fill_parent,高度設定為40dp,裡面嵌套一個LinearLayout,這個LinearLayout由一個ImageView,Textview組成

仿的微信總結
仿的微信總結
仿的微信總結

第二個LinearLayout由三個ImageButton組成

仿的微信總結
仿的微信總結

微信的第二個LinearLayout

<?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="50dp"
    android:background="#eee">
<LinearLayout
    android:id="@+id/id_ll_chat"
    android:layout_height="47dp"
    android:layout_width="fill_parent"
    android:orientation="horizontal">
    <LinearLayout android:layout_height="fill_parent"
        android:layout_width="fill_parent"
        android:layout_weight="1"
        android:orientation="horizontal"
        android:gravity="center">
        <TextView android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:text="聊天"
            android:textColor="#000000"
            android:id="@+id/tl"/>
        </LinearLayout>

    <LinearLayout android:layout_height="fill_parent"
                  android:layout_width="fill_parent"
                  android:layout_weight="1"
                  android:orientation="horizontal"
                  android:gravity="center">
        <TextView android:layout_height="wrap_content"
                  android:layout_width="wrap_content"
                  android:text="發現"
                  android:textColor="#000000"
            android:id="@+id/tf"/>
        </LinearLayout>
        <LinearLayout android:layout_height="fill_parent"
                      android:layout_width="fill_parent"
                      android:layout_weight="1"
                      android:orientation="horizontal"
                      android:gravity="center">
        <TextView android:layout_height="wrap_content"
                  android:layout_width="wrap_content"
                  android:text="通訊錄"
                  android:textColor="#000000"
            android:id="@+id/tt"/>
    </LinearLayout>
    </LinearLayout>
    <ImageView
        android:id="@+id/id_iv_tabline"
        android:layout_width="127dp"
        android:layout_height="3dp"
        android:background="@drawable/tabline" />

</LinearLayout>      

這個LinearLayout裡嵌套了三個LinearLayout,這三個LinearLayout裡,每個都有一個TextView,在最後的結尾加一個藍色的條

下面是主avtivity_main

<?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/shangyi"/>
    <include layout="@layout/shanger"/>
    <android.support.v4.view.ViewPager
        android:id="@+id/id_viewpager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />
</LinearLayout>      

在裡面加入這兩個布局,在加入一個viewpager用于加入下面的可滑動的頁面

下面建立幾個布局檔案

裡面隻有textView,這幾個布局檔案的用處就是為fragment提供模闆,再分别建立相應的.java檔案,

下面我們在MainActivity裡進行設定

先要屏蔽actionbar

我們可以用這幾個方法

1.getActionbar().hide();

2.或在androidmanifest中設定設定android:theme=""

@style/Theme.AppCompat.Light.NoActionBar      

下面是完整代碼

package com.example.window7.weixin;

import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.util.DisplayMetrics;
import android.util.Log;
import android.view.Display;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends FragmentActivity {
    private ViewPager mViewPager;
    private FragmentPagerAdapter mAdapter;
    private List<Fragment> mDatas;
    private TextView mlTextView;
    private TextView mfTextView;
    private TextView mtTextView;
    private LinearLayout mChatLinearLayout;
    private ImageView mTabline;
    private int mScreen1_3;
    private int mCurrentPageIndex;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initTabLine();
        initView();
    }
    public void initTabLine()
    {
        mTabline=(ImageView)findViewById(R.id.id_iv_tabline);
        //shezhi gensuitiao
        Display display=getWindow().getWindowManager().getDefaultDisplay();
        //shezhi display,dedao windoe.manager.defaultdisplay
        DisplayMetrics outMetrics=new DisplayMetrics();
        //shezhi displayMetrics new displayMetrics
        display.getMetrics(outMetrics);
        //dedao getMetrics(outMetrics)
        //huozhe Display display=getWidow().getWindowManager().getDefaultDisplay;
        mScreen1_3 = outMetrics.widthPixels / 3;
        //tede kuanduwei zongpingde 1/3;
        ViewGroup.LayoutParams lp = mTabline.getLayoutParams();
        //dedao layoutParams dexinxi
        lp.width = mScreen1_3;
        //duitajinxing shezhi zhi
        mTabline.setLayoutParams(lp);
    }
    private void initView()
    {
        mViewPager = (ViewPager) findViewById(R.id.id_viewpager);
        // shezhi viewpager
        mlTextView = (TextView) findViewById(R.id.tl);
        //xianglimianjiaru gege textview;
        mfTextView = (TextView) findViewById(R.id.tf);
        //xianglimianjiaru gege textview;
        mtTextView = (TextView) findViewById(R.id.tt);
        //xianglimianjiaru gege textview;
        mChatLinearLayout = (LinearLayout) findViewById(R.id.id_ll_chat);
        //ba linearlayout jiaru

        mDatas = new ArrayList<Fragment>();
        //shezhi yige xinde arrayList;

        YiFragment tab01 = new YiFragment();
        //jiang gege Fragment xinjian;
        ErFragment tab02 = new ErFragment();
        //jiang gege Fragment xinjian;
        SanFragment tab03 = new SanFragment();
        //jiang gege Fragment xinjian;

        mDatas.add(tab01);
        //jiang ge ge fragment jiadao list li
        mDatas.add(tab02);
        //jiang ge ge fragment jiadao list li
        mDatas.add(tab03);
        //jiang ge ge fragment jiadao list li

        mAdapter = new FragmentPagerAdapter(getSupportFragmentManager())
        {
            @Override
            public int getCount()
            {
                return mDatas.size();
            }

            @Override
            public Fragment getItem(int arg0)
            {
                return mDatas.get(arg0);
            }
        };
        mViewPager.setAdapter(mAdapter);
        //viewpager diaoyaong setAdapter(mAdapter);

        mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener()
        {
            @Override
            public void onPageSelected(int position)
            {
                resetTextView();
                switch (position)
                {
                    case 0:
                        mlTextView.setTextColor(Color.parseColor("#008000"));
                        break;
                    case 1:
                        mfTextView.setTextColor(Color.parseColor("#008000"));
                        break;
                    case 2:
                        mtTextView.setTextColor(Color.parseColor("#008000"));
                        break;

                }

                mCurrentPageIndex = position;

            }
            @Override
            public void onPageScrolled(int position, float positionOffset,
                                       int positionOffsetPx)
            {
                Log.e("TAG", position + " , " + positionOffset + " , "
                        + positionOffsetPx);

                LinearLayout.LayoutParams lp = (android.widget.LinearLayout.LayoutParams) mTabline
                        .getLayoutParams();

                if (mCurrentPageIndex == 0 && position == 0)// 0->1
                {
                    lp.leftMargin = (int) (positionOffset * mScreen1_3 + mCurrentPageIndex
                            * mScreen1_3);
                } else if (mCurrentPageIndex == 1 && position == 0)// 1->0
                {
                    lp.leftMargin = (int) (mCurrentPageIndex * mScreen1_3 + (positionOffset - 1)
                            * mScreen1_3);
                } else if (mCurrentPageIndex == 1 && position == 1) // 1->2
                {
                    lp.leftMargin = (int) (mCurrentPageIndex * mScreen1_3 + positionOffset
                            * mScreen1_3);
                } else if (mCurrentPageIndex == 2 && position == 1) // 2->1
                {
                    lp.leftMargin = (int) (mCurrentPageIndex * mScreen1_3 + ( positionOffset-1)
                            * mScreen1_3);
                }
                mTabline.setLayoutParams(lp);

            }

            @Override
            public void onPageScrollStateChanged(int arg0)
            {
                // TODO Auto-generated method stub

            }
        });

    }

    protected void resetTextView()
    {
        mlTextView.setTextColor(Color.BLACK);
        mfTextView.setTextColor(Color.BLACK);
        mtTextView.setTextColor(Color.BLACK);
    }

}