模仿最新微信主頁面UI


    看到微信和易信的最新界面,一定都覺得用着很爽很方便, 所以就想做一個像微信和易信上的滑動導航的UI,部分代碼參考網上的例子,由於下載很久了,也不知道用的是誰的,所以這里就不在特別說明。

    廢話不多說,直接上代碼,代碼主要部分已注釋比較清楚,故不另作說明:


主界面:

<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:background="#fcfcfc"
android:orientation="vertical" >

<LinearLayout
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="#ff303537"
android:gravity="center_vertical"
android:orientation="horizontal" >

<LinearLayout
android:id="@+id/title_ll"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:orientation="horizontal" >

<ImageView
android:layout_width="35dp"
android:layout_height="35dp"
android:layout_marginLeft="14dp"
android:layout_marginRight="2dp"
android:background="@drawable/home_logo" />
</LinearLayout>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="12dp"
android:text="微信"
android:textColor="#ffffffff"
android:textSize="18dp" />
</LinearLayout>

<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="40dp"
android:paddingTop="5dp" >

<ImageView
android:id="@+id/top_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="@drawable/background_top" />

<LinearLayout
android:id="@+id/tab_bar"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >

<TextView
android:id="@+id/tv_liaotian"
android:clickable="true"
style="@style/TabItem"
android:text="@string/chat"
android:textColor="@color/text_color_selector" />

<TextView
android:id="@+id/tv_faxian"
android:clickable="true"
style="@style/TabItem"
android:text="@string/find"
android:textColor="@color/text_color_selector" />

<TextView
android:id="@+id/tv_tongxunlu"
android:clickable="true"
style="@style/TabItem"
android:text="@string/contact"
android:textColor="@color/text_color_selector" />
</LinearLayout>
</RelativeLayout>

<ImageView
android:layout_width="fill_parent"
android:layout_height="1dp"
android:background="#D6D6D6" />

<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1">

</android.support.v4.view.ViewPager>

</LinearLayout>

主要代碼部分:

package com.example.viewpage_demo;

import java.util.ArrayList;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.app.FragmentTransaction;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.DisplayMetrics;
import android.view.View;
import android.view.ViewGroup;
import android.view.View.OnClickListener;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.RelativeLayout.LayoutParams;
import android.widget.Toast;

public class ViewPageDemoActivity extends FragmentActivity implements
OnClickListener {

private ViewPager pager;
private ImageView mImageView;
private int mScreenWidth; // 獲取屏幕寬度
private int item_width; // 下划線寬度

private int endPosition;
private int beginPosition;
private int currentFragmentIndex;
private boolean isEnd;

private TextView liaotian, faxian, tongxunlu;

private ArrayList<Fragment> fragments;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_view_page_demo);

// 初始化view
initView();

// 初始化viewPager
initViewPager();
}

public void initView() {
/**
* 給頂部工具欄綁定監聽器
*/

liaotian = (TextView) findViewById(R.id.tv_liaotian);
faxian = (TextView) findViewById(R.id.tv_faxian);
tongxunlu = (TextView) findViewById(R.id.tv_tongxunlu);

liaotian.setOnClickListener(this);
faxian.setOnClickListener(this);
tongxunlu.setOnClickListener(this);

/**
* 修改頂部藍色ImageView的寬度
*/
DisplayMetrics dm = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(dm);
mScreenWidth = dm.widthPixels;
mImageView = (ImageView) findViewById(R.id.top_image);
item_width = (int) ((mScreenWidth / 3.0 + 0.5f));

LayoutParams params = (LayoutParams) mImageView.getLayoutParams();
params.width = item_width;
mImageView.setLayoutParams(params);

pager = (ViewPager) findViewById(R.id.pager);
}

//初始化Viewpager
private void initViewPager() {
fragments = new ArrayList<Fragment>();

BaseFragment fragment = new BaseFragment();
fragments.add(fragment);

BaseFragment1 fm = new BaseFragment1();
fragments.add(fm);

BaseFragment2 fragment2 = new BaseFragment2();
fragments.add(fragment2);

MyFragmentPagerAdapter fragmentPagerAdapter = new MyFragmentPagerAdapter(
getSupportFragmentManager(), fragments);
pager.setAdapter(fragmentPagerAdapter);
fragmentPagerAdapter.setFragments(fragments);
pager.setOnPageChangeListener(new MyOnPageChangeListener());
pager.setCurrentItem(0);
liaotian.setEnabled(false);
}

//響應TextView點擊事件
@Override
public void onClick(View v) {

switch (v.getId()) {
case R.id.tv_liaotian:
// 會觸發OnPageChangeListener的onPageSelected(index)
pager.setCurrentItem(0);
break;

case R.id.tv_faxian:
// 會觸發OnPageChangeListener的onPageSelected(index)
pager.setCurrentItem(1);
break;

case R.id.tv_tongxunlu:
// 會觸發OnPageChangeListener的onPageSelected(index)
pager.setCurrentItem(2);
break;

default:
break;
}
}

//配置FragmentPagerAdapter
private class MyFragmentPagerAdapter extends FragmentPagerAdapter {
private ArrayList<Fragment> fragments;
private FragmentManager fm;

public MyFragmentPagerAdapter(FragmentManager fm) {
super(fm);
this.fm = fm;
}

public MyFragmentPagerAdapter(FragmentManager fm,
ArrayList<Fragment> fragments) {
super(fm);
this.fm = fm;
this.fragments = fragments;
}

@Override
public int getCount() {
return fragments.size();
}

@Override
public Fragment getItem(int position) {
return fragments.get(position);
}

@Override
public int getItemPosition(Object object) {
return POSITION_NONE;
}

public void setFragments(ArrayList<Fragment> fragments) {
if (this.fragments != null) {
FragmentTransaction ft = fm.beginTransaction();
for (Fragment f : this.fragments) {
ft.remove(f);
}
ft.commit();
ft = null;
fm.executePendingTransactions();
}
this.fragments = fragments;
notifyDataSetChanged();
}

@Override
public Object instantiateItem(ViewGroup container, final int position) {
Object obj = super.instantiateItem(container, position);
return obj;
}

}

//配置滑動事件
public class MyOnPageChangeListener implements OnPageChangeListener {

@Override
public void onPageSelected(final int position) {
Animation animation = new TranslateAnimation(endPosition, position
* item_width, 0, 0);

beginPosition = position * item_width;

currentFragmentIndex = position;
if (animation != null) {
animation.setFillAfter(true); // 設置為true,動畫就會停留在最后的地方
animation.setDuration(100); // 設置持續時間
mImageView.startAnimation(animation);
}

Toast.makeText(getApplicationContext(), "selected" + position,
Toast.LENGTH_LONG).show();
switch (position) {
case 0:
liaotian.setEnabled(false);
faxian.setEnabled(true);
tongxunlu.setEnabled(true);
break;
case 1:
liaotian.setEnabled(true);
faxian.setEnabled(false);
tongxunlu.setEnabled(true);
break;
case 2:
liaotian.setEnabled(true);
faxian.setEnabled(true);
tongxunlu.setEnabled(false);
break;

default:
break;
}

}

// 表示在前一個頁面滑動到后一個頁面的時候,在前一個頁面滑動前調用的方法
// position :當前頁面,及你點擊滑動的頁面
// positionOffset:當前頁面偏移的百分比
// positionOffsetPixels:當前頁面偏移的像素位置
@Override
public void onPageScrolled(int position, float positionOffset,
int positionOffsetPixels) {
if (!isEnd) {
if (currentFragmentIndex == position) {
endPosition = item_width * currentFragmentIndex
+ (int) (item_width * positionOffset);
}
if (currentFragmentIndex == position + 1) {
endPosition = item_width * currentFragmentIndex
- (int) (item_width * (1 - positionOffset));
}

Animation mAnimation = new TranslateAnimation(beginPosition,
endPosition, 0, 0);
mAnimation.setFillAfter(true);
mAnimation.setDuration(100);
mImageView.startAnimation(mAnimation);
beginPosition = endPosition;
}
}

// state ==1的時候表示正在滑動,state==2的時候表示滑動完畢了,state==0的時候表示什么都沒做,就是停在那
@Override
public void onPageScrollStateChanged(int state) {
if (state == ViewPager.SCROLL_STATE_DRAGGING) {
isEnd = false;
} else if (state == ViewPager.SCROLL_STATE_SETTLING) {
isEnd = true;
beginPosition = currentFragmentIndex * item_width;
if (pager.getCurrentItem() == currentFragmentIndex) {
// 未跳入下一個頁面
mImageView.clearAnimation();
Animation animation = null;
// 恢復位置
animation = new TranslateAnimation(endPosition,
currentFragmentIndex * item_width, 0, 0);
animation.setFillAfter(true);
animation.setDuration(100);
mImageView.startAnimation(animation);
endPosition = currentFragmentIndex * item_width;
}

}
}

}

}
其中的BaseFragment:


package com.example.viewpage_demo;

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

public class BaseFragment extends Fragment {

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
super.onCreateView(inflater, container, savedInstanceState);
View view =inflater.inflate(R.layout.layout, null);
TextView tv_fragment = (TextView) view.findViewById(R.id.tv_fragment);
tv_fragment.setText("xiaoxi");
return view;
}
}

界面布局就一個TextView 自己寫吧。


由於這里用的三個Fragment都是樣例,都如上,這里就不全部貼出來了。

其中部分屬性這里就不一一說明,源代碼地址下載:

http://download.csdn.net/detail/xiaorenwu1206/7762213


現還屬於實習生,如有部分不妥,歡迎拍磚指教。


我一直認為不貼圖的博客不是好博客,所以上圖吧:






注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com