QQ5.0主界面实现

学习资料：

①：http://www.imooc.com/comment/198  高仿微信5.2.1主界面及消息提醒

实现的效果：

可以左右滑动，而顶部的指示Tab横线跟随滑动，并且颜色改变。

实现消息提醒的效果 BadgeView

②：布局文件，没有新的东西

注意模块化的使用

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

注意引入ViewPager控件

   <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" >
    </android.support.v4.view.ViewPager>

当考虑高度时，用 固定的 xdp 来表示，而不是 wrap_content

点9图片，如下情况，使用的是background有效。src无效。易于理解。

    <ImageView 
        android:id="@+id/tabLine"
        android:layout_width="50dp"
        android:layout_height="5dp"
        android:background="@drawable/tabline"
        android:layout_gravity="bottom"/>

③：

a. ViewPager的使用

1.找到数据源

2.定义适配器

3.设置监听

一般是 用 Fragment 作为数据源，添加到列表数组中去。然后 实现 继承 FragmentPagerAdapter 的适配器。

代码挺简单，不懂的方法，查看android的文档参考。

底部的指示条是根据ViewPager的回调方法，取得移动的数值，设置 指示条的 的 左边距 leftMargin

其中如何设置控件参数:

	LinearLayout.LayoutParams lp = (android.widget.LinearLayout.LayoutParams) tabLine.getLayoutParams();
	int left = (int) (arg0*screenSize1_3 + arg1*screenSize1_3);
	lp.setMargins(left, 0, 0, 0);
	tabLine.setLayoutParams(lp);

b. BadgeView 使用简单，有空要学习它的实现。 https://github.com/stefanjauker/BadgeView 

		BadgeView bv = new BadgeView(this);
		bv.setBadgeCount(9);
<span style="white-space:pre">		</span>//bv.setTargetView(txvChat);<span style="white-space:pre">	</span>//会覆盖TextView上的文字显示
		ll_chat.addView(bv);

c. 

package com.example.qq_main5_0;

public class MainActivity extends FragmentActivity implements OnClickListener {

	private ViewPager viewPager;
	private List<Fragment> listViews;
	
	private ImageView tabLine;
	
	private int screenSize1_3;
	
	private static final String TAG = "MainActivity";
	
	private TextView txvChat;
	private TextView txvFind;
	private TextView txvContact;
	
	private LinearLayout ll_chat;
	private LinearLayout ll_find;
	private LinearLayout ll_contact;
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		
		initWidget();
		initData();
		
	}

	private void initData() {
		BadgeView bv = new BadgeView(this);
		bv.setBadgeCount(9);
		ll_chat.addView(bv);
	}

	private void initWidget() {
		
		ll_chat = (LinearLayout) this.findViewById(R.id.ll_chat);
		ll_find = (LinearLayout) this.findViewById(R.id.ll_find);
		ll_contact = (LinearLayout) this.findViewById(R.id.ll_contact);
		
		txvChat = (TextView) this.findViewById(R.id.txv_chat);
		txvFind = (TextView) this.findViewById(R.id.txv_find);
		txvContact = (TextView) this.findViewById(R.id.txv_contact);
		
		ll_chat.setOnClickListener(this);
		ll_find.setOnClickListener(this);
		ll_contact.setOnClickListener(this);
		
		tabLine = (ImageView) this.findViewById(R.id.tabLine);
		Display defaultDisplay = this.getWindowManager().getDefaultDisplay();
		DisplayMetrics outMetrics = new DisplayMetrics();
		defaultDisplay.getMetrics(outMetrics);
		screenSize1_3 = outMetrics.widthPixels / 3;
		LayoutParams layoutParams = tabLine.getLayoutParams();
		layoutParams.width = screenSize1_3;
		tabLine.setLayoutParams(layoutParams);		
		
		viewPager = (ViewPager) this.findViewById(R.id.viewPager);
		listViews = new ArrayList<Fragment>();
		listViews.add(new ChatFragment());
		listViews.add(new FindFragment());
		listViews.add(new ContactFragment());
		
		viewPager.setAdapter(new MyAdapter(getSupportFragmentManager() ));
		
		viewPager.setOnPageChangeListener(new OnPageChangeListener() {
			
			@Override
			public void onPageSelected(int arg0) {
				Log.e(TAG, "onPageSeleted()" );
				Log.e(TAG, "arg0-->"+arg0);
			}
			
			@Override
			public void onPageScrolled(int arg0, float arg1, int arg2) {
				Log.e(TAG, "onPageScrolled()");
				Log.e(TAG, "arg0-->"+arg0);
				Log.e(TAG, "arg1-->"+arg1);
				Log.e(TAG, "arg2-->"+arg2);
				
				LinearLayout.LayoutParams lp = (android.widget.LinearLayout.LayoutParams) tabLine.getLayoutParams();
				int left = (int) (arg0*screenSize1_3 + arg1*screenSize1_3);
				lp.setMargins(left, 0, 0, 0);
				tabLine.setLayoutParams(lp);
				
				//设置显示当前页文字颜色
				reSetCurrentPgColor(arg0 );
				
			}
			
			private void reSetCurrentPgColor(int arg0) {
				txvChat.setTextColor(Color.BLACK);
				txvFind.setTextColor(Color.BLACK);
				txvContact.setTextColor(Color.BLACK);
				switch (arg0 ) {
				case 0:
					txvChat.setTextColor(Color.parseColor("#76B34D"));	//深绿色
					break;
				case 1:
					txvFind.setTextColor(Color.parseColor("#76B34D"));
					break;
				case 2:
					txvContact.setTextColor(Color.parseColor("#76B34D"));
					break;
				default:
					break;
				}
			}

			@Override
			public void onPageScrollStateChanged(int arg0) {
				Log.e(TAG, "onPageScrollStateChanged()");
				Log.e(TAG, "arg0-->"+arg0);
			}
		});
	}

	private class MyAdapter extends FragmentPagerAdapter {


		public MyAdapter(FragmentManager fm) {
			super(fm);
			// TODO Auto-generated constructor stub
		}

		@Override
		public android.support.v4.app.Fragment getItem(int arg0) {
			return listViews.get(arg0);
		}

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

	@Override
	public void onClick(View v) {
		switch(v.getId()) {
		case R.id.ll_chat:
			scrollPage(0);
			break;
		case R.id.ll_find:
			scrollPage(1);
			break;
		case R.id.ll_contact:
			scrollPage(2);
			break;
		default:
			break;
		}
	}
	
	private void scrollPage(int position ) {
		viewPager.setCurrentItem(position, true);
	}

}

d. 源码：