标签：android ui设计 layout 布局 viewpager
大家好，这是前段时间仿易信Android客户端UI做的一个小程序，资源就是易信客户端里面找的，作为练手学习之用，希望大家喜欢！
首先是第一次使用的导航页面，效果图：
主要是处理当手左右滑动时小圆点也跟随切换的问题，这个页面的逻辑代码如下：
public class WelcomeActivity extends Activity{
ViewPager mPager;
MyAdapter myAdapter;
List<View> views=new ArrayList<View>(); //页面子项
List<ImageView> indicator=new ArrayList<ImageView>();
ImageView icon0,icon1,icon2,icon3,icon4,icon5;
Button start;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_welcome);
mPager=(ViewPager)findViewById(R.id.guide_viewpager);
//初始化pager和圆点
initView();
start=(Button)views.get(views.size()-1).findViewById(R.id.input_app); //最后一个view中去获取
myAdapter=new MyAdapter();
mPager.setAdapter(myAdapter);
mPager.setOnPageChangeListener(new OnPageChangeListener() {
@Override
public void onPageSelected(int arg0) {
clearSate(); //清除状态
switch (arg0) {
case 0: //改变圆点
icon0.setImageDrawable(getResources().getDrawable(R.drawable.view_pager_indicator_grey_selected));
break;
case 1:
icon1.setImageDrawable(getResources().getDrawable(R.drawable.view_pager_indicator_grey_selected));
break;
case 2:
icon2.setImageDrawable(getResources().getDrawable(R.drawable.view_pager_indicator_grey_selected));
break;
case 3:
icon3.setImageDrawable(getResources().getDrawable(R.drawable.view_pager_indicator_grey_selected));
break;
case 4:
icon4.setImageDrawable(getResources().getDrawable(R.drawable.view_pager_indicator_grey_selected));
break;
case 5:
icon5.setImageDrawable(getResources().getDrawable(R.drawable.view_pager_indicator_grey_selected));
break;
default:
break;
}
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
@Override
public void onPageScrollStateChanged(int arg0) {
}
});
start.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
startActivity(new Intent(WelcomeActivity.this,MainActivity.class));
finish();
}
});
}
/**
*
* @Description: 清除圆点状态
*/
protected void clearSate() {
icon0.setImageDrawable(getResources().getDrawable(R.drawable.view_pager_indicator_grey_unselected));
icon1.setImageDrawable(getResources().getDrawable(R.drawable.view_pager_indicator_grey_unselected));
icon2.setImageDrawable(getResources().getDrawable(R.drawable.view_pager_indicator_grey_unselected));
icon3.setImageDrawable(getResources().getDrawable(R.drawable.view_pager_indicator_grey_unselected));
icon4.setImageDrawable(getResources().getDrawable(R.drawable.view_pager_indicator_grey_unselected));
icon5.setImageDrawable(getResources().getDrawable(R.drawable.view_pager_indicator_grey_unselected));
}
private void initView() {
views.add(LayoutInflater.from(WelcomeActivity.this).inflate(R.layout.view0, null));
views.add(LayoutInflater.from(WelcomeActivity.this).inflate(R.layout.view1, null));
views.add(LayoutInflater.from(WelcomeActivity.this).inflate(R.layout.view2, null));
views.add(LayoutInflater.from(WelcomeActivity.this).inflate(R.layout.view3, null));
views.add(LayoutInflater.from(WelcomeActivity.this).inflate(R.layout.view4, null));
views.add(LayoutInflater.from(WelcomeActivity.this).inflate(R.layout.view5, null));
icon0=(ImageView)findViewById(R.id.indicator0); //小圆点
icon1=(ImageView)findViewById(R.id.indicator1);
icon2=(ImageView)findViewById(R.id.indicator2);
icon3=(ImageView)findViewById(R.id.indicator3);
icon4=(ImageView)findViewById(R.id.indicator4);
icon5=(ImageView)findViewById(R.id.indicator5);
indicator.add(icon0);
indicator.add(icon1);
indicator.add(icon2);
indicator.add(icon3);
indicator.add(icon4);
indicator.add(icon5);
}
class MyAdapter extends PagerAdapter{
@Override
public int getCount() {
return views.size();
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0==arg1;
}
@Override
public Object instantiateItem(View container, int position) {
((ViewPager)container).addView(views.get(position));
return views.get(position);
}
@Override
public void destroyItem(View container, int position, Object object) {
((ViewPager)container).removeView(views.get(position));
}
}
}
接下来就是主页面，只加了actionbar和滑动tab标题栏，效果如下：
这里是基于android框架自动生成项目写的，大家新建项目这里可以选择自己喜欢的格式，如下：
这里会生成一个包含好些类的android工程项目，然后我们自己更改一些代码适配我们项目的需求，代码如下：
public class MainActivity extends Activity {
/**
* The {@link android.support.v4.view.PagerAdapter} that will provide
* fragments for each of the sections. We use a
* {@link FragmentPagerAdapter} derivative, which will keep every
* loaded fragment in memory. If this becomes too memory intensive, it
* may be best to switch to a
* {@link android.support.v13.app.FragmentStatePagerAdapter}.
*/
SectionsPagerAdapter mSectionsPagerAdapter;
/**
* The {@link ViewPager} that will host the section contents.
*/
ViewPager mViewPager;
/**
* 用于储存Fragment的链表
*/
private List<Fragment> list=new ArrayList<Fragment>();
long exittime=0;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Set up the action bar.
final ActionBar actionBar = getActionBar();
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
//add fragment
list.add(new Fragment1(MainActivity.this));
list.add(new Fragment2(MainActivity.this));
list.add(new Fragment3(MainActivity.this));
list.add(new Fragment4(MainActivity.this));
// Create the adapter that will return a fragment for each of the three
// primary sections of the activity.
mSectionsPagerAdapter = new SectionsPagerAdapter(getFragmentManager());
// Set up the ViewPager with the sections adapter.
mViewPager = (ViewPager) findViewById(R.id.pager);
mViewPager.setAdapter(mSectionsPagerAdapter);
// When swiping between different sections, select the corresponding
// tab. We can also use ActionBar.Tab#select() to do this if we have
// a reference to the Tab.
mViewPager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
@Override
public void onPageSelected(int position) {
actionBar.setSelectedNavigationItem(position);
}
});
// For each of the sections in the app, add a tab to the action bar.
for (int i = 0; i < mSectionsPagerAdapter.getCount(); i++) {
// Create a tab with text corresponding to the page title defined by
// the adapter. Also specify this Activity object, which implements
// the TabListener interface, as the callback (listener) for when
// this tab is selected.
actionBar.addTab(
actionBar.newTab()
.setText(mSectionsPagerAdapter.getPageTitle(i))
.setTabListener(new ActionBar.TabListener(){
@Override
public void onTabReselected(Tab tab,
FragmentTransaction ft) {
}
@Override
public void onTabSelected(Tab tab,
FragmentTransaction ft) {
//当某个tab被选择的时候执行,就是按下一个tab的时候
mViewPager.setCurrentItem(tab.getPosition());
}
@Override
public void onTabUnselected(Tab tab,
FragmentTransaction ft) {
}
}));
}
}
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
if(event.getAction()==KeyEvent.ACTION_DOWN&&keyCode==KeyEvent.KEYCODE_BACK){
if(System.currentTimeMillis()-exittime>2000){
Toast.makeText(MainActivity.this, "再按一次退出程序", Toast.LENGTH_SHORT).show();
exittime=System.currentTimeMillis();
}else{
finish();
System.exit(0); //退出程序
}
}
return true;
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
switch (id) {
case R.id.action_search:
break;
case R.id.action_more:
startActivity(new Intent(MainActivity.this,MoreActivity.class));
break;
default:
break;
}
return true;
}
/**
* A {@link FragmentPagerAdapter} that returns a fragment corresponding to
* one of the sections/tabs/pages.<p>
* 这里是左右滑动选择pager的时候执行，并不包含点击tab哦
*/
public class SectionsPagerAdapter extends FragmentPagerAdapter {
public SectionsPagerAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
// getItem is called to instantiate the fragment for the given page.
return list.get(position);
}
@Override
public int getCount() {
// Show total pages.
return 4;
}
@Override
public CharSequence getPageTitle(int position) {
Locale l = Locale.getDefault();
switch (position) {
case 0:
return getString(R.string.title_section1).toUpperCase(l);
case 1:
return getString(R.string.title_section2).toUpperCase(l);
case 2:
return getString(R.string.title_section3).toUpperCase(l);
case 3:
return getString(R.string.title_section4).toUpperCase(l);
}
return null;
}
}
}
还有一个是点击右上角的加号按钮弹出的一个布局：
这里只写了xml布局，比较简单：
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:orientation="vertical"
>
<RelativeLayout
android:layout_marginTop="20dp"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:id="@+id/chart"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="发起群聊"
android:drawablePadding="5dp"
android:drawableTop="@drawable/main_chatting"/>
<TextView
android:id="@+id/call"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="网络通话"
android:drawablePadding="5dp"
android:layout_centerInParent="true"
android:drawableTop="@drawable/main_call"/>
<TextView
android:id="@+id/msg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="免费短信"
android:drawablePadding="5dp"
android:layout_alignParentRight="true"
android:drawableTop="@drawable/main_sms"/>
</RelativeLayout>
<RelativeLayout
android:layout_marginTop="30dp"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:id="@+id/voice"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="电话留言"
android:drawablePadding="5dp"
android:drawableTop="@drawable/main_voice"/>
<TextView
android:id="@+id/friend"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="添加好友"
android:drawablePadding="5dp"
android:layout_centerInParent="true"
android:drawableTop="@drawable/main_friend"/>
<TextView
android:id="@+id/scan"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" 扫一扫"
android:drawablePadding="5dp"
android:layout_alignParentRight="true"
android:drawableTop="@drawable/main_scan"/>
</RelativeLayout>
</LinearLayout>
想要完整源码的朋友请自己下载。
demo下载地址：
标签：android ui设计 layout 布局 viewpager
原文地址：http://blog.csdn.net/yangyong915/article/details/43447429
