看到微信和易信的最新界面,一定都觉得用着很爽很方便, 所以就想做一个像微信和易信上的滑动导航的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
现还属于实习生,如有部分不妥,欢迎拍砖指教。
我一直认为不贴图的博客不是好博客,所以上图吧: