ViewPager+RadioGroup高仿微信经典布局

ViewPager+RadioGroup高仿微信经典布局

我们都知道一款好的软件，都有一个简洁又好看的界面，然而微信被广大民众所喜欢，他的界面也可以说是一中经典吧。

然而我们在制作的时候也遇到了一些问题：

如何让RadioGroup在底部，和样式的跳动

如何定制RadioButton

代码的基本思路

理解Fragment生命周期

下面先看一下完成后的效果如下：

控件和Fragment同步

如何让RadioGroup在底部，和样式的跳动

中主布局用LinearLayout，android:orientation=”vertical”

RadioGroup 用android:orientation=”horizontal”简单的解决了这问题

其中样式的变换代码如下：

drawable/radio_seletor_wechat.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/ic_wechat" android:state_checked="false"></item>
<item android:drawable="@drawable/ic_wechat_gray" android:state_checked="true"></item>
<item android:drawable="@drawable/ic_wechat"></item>
</selector>

在主页面中使用：

android:drawableTop="@drawable/radio_seletor_wechat"

如何定制RadioButton

如何让它均匀分布，和出去原点呢！

<RadioGroup
android:id="@+id/radioGroup_root"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/bg"
android:orientation="horizontal">

<!-- android:background="@drawable/radio_seletor"-->
<RadioButton
android:id="@+id/radio_wechat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:button="@null"
android:drawableTop="@drawable/radio_seletor_wechat"
android:gravity="center"
android:text="微信"
android:textSize="20dp"/>
</RadioGroup>

去除原点android:button=”@null”

用它横向均匀分布android:layout_weight=”1”

代码的基本思路

布局已完成，下面就是要加载页面了

首先我们先看一下ViewPager的用法

ViewPager的功能就是可以使视图滑动，就像Lanucher左右滑动那样。分三个步骤来使用它：

在住布局文件里加入

2.加载要显示的页卡，

在Activity里实例化ViewPager组件，并设置它的Adapter（就是PagerAdapter，方法与ListView一样的），在这里一般需要重写PagerAdapter。

然后我们在看碎片的跳动带动着空间checked的选定

创建四个Fragment

适配器其代码如下:

public class FragmentViewAdapter extends FragmentPagerAdapter {
BaseFragment[] item;
public FragmentViewAdapter(FragmentManager fm, BaseFragment[] item) {
super(fm);
this.item = item;
}
@Override
public Fragment getItem(int position) {
return item[position];
}

@Override
public int getCount() {
return item==null?0:item.length;
}
}

MainActivity:

public class MainActivity extends AppCompatActivity implements RadioGroup.OnCheckedChangeListener, BaseFragment.OnFragmentInteractionListener {

ViewPager viewPager;

RadioGroup radioGroup_root;

RadioButton radio_wechat, radio_contact, radio_discover, radio_my_gray;

BaseFragment[] viewFram = new BaseFragment[]{
new OneFragment(),
new TwoFragment(),
new ThreeFragment(),
new FourFragment()
};

//    ListView listView;

//    Adapter_Address adapter_address;

List<AdressBeen> itme = new ArrayList<AdressBeen>();

private static final String[] PHONES_PROJECTION = new String[]{
Phone.DISPLAY_NAME, Phone.NUMBER, ContactsContract.CommonDataKinds.Photo.PHOTO_ID, Phone.CONTACT_ID
};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
initDate();
FragmentViewAdapter adapter = new FragmentViewAdapter(getSupportFragmentManager(), viewFram);
viewPager.setAdapter(adapter);
viewPager.setCurrentItem(3);
radio_my_gray.setChecked(true);

getPhoneContacts();
//        adapter_address = new Adapter_Address(itme,this);
//      listView.setAdapter(adapter_address);
}

private void initDate() {
radioGroup_root.setOnCheckedChangeListener(this);
viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}

@Override
public void onPageSelected(int position) {
showpage(position);
}

@Override
public void onPageScrollStateChanged(int state) {

}
});
}

private void showpage(int index) {
switch (index) {
case 0:
radio_wechat.setChecked(true);
break;
case 1:
radio_contact.setChecked(true);
Bundle b=new Bundle();
//                b.putSerializable("itme", (ArrayList<? extends Parcelable>) itme);
TwoFragment.setB(b);
break;
case 2:
radio_discover.setChecked(true);
break;
case 3:
radio_my_gray.setChecked(true);
break;
}

}

private void initView() {
viewPager = (ViewPager) findViewById(R.id.content);
radioGroup_root = (RadioGroup) findViewById(R.id.radioGroup_root);
radio_wechat = (RadioButton) findViewById(R.id.radio_wechat);
radio_contact = (RadioButton) findViewById(R.id.radio_contact);
radio_discover = (RadioButton) findViewById(R.id.radio_discover);
radio_my_gray = (RadioButton) findViewById(R.id.radio_my_gray);
}

@Override
public void onFragmentInteraction(Bundle b) {
if (b != null) {
String arg = b.getString(BaseFragment.ARGS, "没参数值");
Toast.makeText(this, arg, Toast.LENGTH_SHORT).show();
}
}

@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
switch (checkedId) {
case R.id.radio_wechat:
viewPager.setCurrentItem(0);
break;
case R.id.radio_contact:
viewPager.setCurrentItem(1);
break;
case R.id.radio_discover:
viewPager.setCurrentItem(2);
break;
case R.id.radio_my_gray:
viewPager.setCurrentItem(3);
break;
}
}

public void getPhoneContacts() {
ContentResolver resolver = this.getContentResolver();
Cursor phoneCursor = resolver.query(Phone.CONTENT_URI, PHONES_PROJECTION, null, null, null);
if (phoneCursor != null) {
while (phoneCursor.moveToNext()) {
//号码
String phoneNumber = phoneCursor.getString(1);
//名字
String contactName = phoneCursor.getString(0);
//得到联系人id
Long contactid = phoneCursor.getLong(3);
//得到照片id
Long photoid = phoneCursor.getLong(2);
//得到联系人头像
Bitmap contactPhoto = null;
if (photoid > 0) {
Uri uri = ContentUris.withAppendedId(ContactsContract.Contacts.CONTENT_URI, contactid);
InputStream input = ContactsContract.Contacts.openContactPhotoInputStream(resolver, uri);
contactPhoto= BitmapFactory.decodeStream(input);
} else {
contactPhoto = BitmapFactory.decodeResource(getResources(), R.drawable.address1);
}
AdressBeen been = new AdressBeen();
been.setAddress_name(contactName);
been.setAddress_phone(phoneNumber);
been.setAddress_src(contactPhoto);
itme.add(been);
}
phoneCursor.close();
}
}
}