android中利用 ViewPage 实现滑动屏

最近实现了这样的一个效果：滑动界面出现拖拽效果，可翻动3屏，也可点击按钮翻动页面。

主要利用android.support.v4.view.ViewPager控件来实现。

第一个界面：

利用ViewPage实现滑动屏" src="https://img.it610.com/image/product/184fac20c413430b9900f87b48d1ad3d.jpg" alt="android中利用 ViewPage 实现滑动屏_第1张图片" name="image_operate_14861355727237230" width="650" height="255" style="border:1px solid black;">

滑动屏幕：
利用ViewPage实现滑动屏" src="https://img.it610.com/image/product/84c915fe976c44909f082b97f3c338bf.jpg" alt="android中利用 ViewPage 实现滑动屏_第2张图片" name="image_operate_25331355727054143" width="650" height="257" style="border:1px solid black;">

换到下一屏：
利用ViewPage实现滑动屏" src="https://img.it610.com/image/product/de3b658865ea485ea616b06b4eb0d02a.jpg" alt="android中利用 ViewPage 实现滑动屏_第3张图片" name="image_operate_61111355727032111" width="650" height="240" style="border:1px solid black;">

布局文件：

主界面 main.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >

<android.support.v4.view.ViewPager
android:id="@+id/guidePages"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>

<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<LinearLayout
android:id="@+id/viewGroup"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:gravity="center_horizontal"
android:orientation="horizontal" >
<Button
android:id="@+id/pre_one_button"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_weight = "1"
android:textSize="18sp"
android:textColor="@android:color/black"
android:text="本周"
android:padding="7dp"
android:textStyle="bold"
android:background="@drawable/button_selected"
/>
<Button
android:id="@+id/pre_two_button"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_weight = "1"
android:textSize="18sp"
android:textColor="@android:color/black"
android:text="前一周"
android:padding="7dp"
android:textStyle="bold"
android:background="@drawable/button_unselected"
/>
<Button
android:id="@+id/pre_three_button"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_weight = "1"
android:textSize="18sp"
android:textColor="@android:color/black"
android:text="前二周"
android:padding="7dp"
android:textStyle="bold"
android:background="@drawable/button_unselected"
/>
</LinearLayout>
</RelativeLayout>

</FrameLayout>

第一屏界面：page01.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

<ListView
android:id="@+id/lv01"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginTop="50dp"
android:textColor="@android:color/black"
android:cacheColorHint="#00000000"
android:scrollbars="none"
/>
</LinearLayout>

第二屏，第三屏与第一屏布局一样，分别叫page02.xml page03.xml，并且要把ListView的 id 改为 lv02 lv03

列表条目布局：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:id="@+id/subjectLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="10dp"
android:background="@android:color/white"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/homework_icon"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@android:color/black"
android:id="@+id/homework_name"
android:layout_toRightOf="@id/homework_icon"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@android:color/black"
android:textSize="18sp"
android:id="@+id/homework_subject"
android:layout_toRightOf="@id/homework_icon"
android:layout_below="@id/homework_name"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@android:color/black"
android:id="@+id/homework_teacher"
android:layout_toRightOf="@id/homework_icon"
android:layout_below="@id/homework_subject"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@android:color/black"
android:id="@+id/homework_submit_date"
android:layout_toRightOf="@id/homework_icon"
android:layout_below="@id/homework_teacher"
/>
</RelativeLayout>

Java代码：

public class MainActivity extends Activity {

private ViewPager viewPager;
private ArrayList<View> pageViews;
private ViewGroup buttonsLine;
private Button button01;
private Button button02;
private Button button03;
private Button[] buttons;
private ListView lv01;
private ListView lv02;
private ListView lv03;

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
this.requestWindowFeature(Window.FEATURE_NO_TITLE);

LayoutInflater inflater = getLayoutInflater();
pageViews = new ArrayList<View>();
//每页de界面
View page01=inflater.inflate(R.layout.page01, null);
View page02=inflater.inflate(R.layout.page02, null);
View page03=inflater.inflate(R.layout.page03, null);
pageViews.add(page01);//lee
pageViews.add(page02);//lee
pageViews.add(page03);//lee
lv01 = (ListView) page01.findViewById(R.id.lv01);
lv02 = (ListView) page02.findViewById(R.id.lv02);
lv03 = (ListView) page03.findViewById(R.id.lv03);
lv01.setAdapter(new HomeworkListAdapter(this));
lv02.setAdapter(new HomeworkListAdapter(this));
lv03.setAdapter(new HomeworkListAdapter(this));

//按钮栏
buttons = new Button[pageViews.size()];
buttonsLine = (ViewGroup)inflater.inflate(R.layout.main, null);
button01 = (Button) buttonsLine.findViewById(R.id.pre_one_button);
button02 = (Button) buttonsLine.findViewById(R.id.pre_two_button);
button03 = (Button) buttonsLine.findViewById(R.id.pre_three_button);
buttons[0] = button01;
buttons[1] = button02;
buttons[2] = button03;
button01.setOnClickListener(new GuideButtonClickListener(0));
button02.setOnClickListener(new GuideButtonClickListener(1));
button03.setOnClickListener(new GuideButtonClickListener(2));

viewPager = (ViewPager)buttonsLine.findViewById(R.id.guidePages);
setContentView(buttonsLine);

viewPager.setAdapter(new GuidePageAdapter());
viewPager.setOnPageChangeListener(new GuidePageChangeListener());
}

//列表适配
public class HomeworkListAdapter extends BaseAdapter {

private Context mContext = null;
private LayoutInflater mInflater = null;

public HomeworkListAdapter(Context c) {
mContext = c;
mInflater = LayoutInflater.from(this.mContext);
}

@Override
public int getCount() {
return 8;
}

@Override
public Object getItem(int position) {
return position;
}

@Override
public long getItemId(int position) {
return position;
}

@Override
public View getView(int position, View convertView, ViewGroup parent) {

ViewHolder holder = null;
if (convertView == null) {
holder = new ViewHolder();
convertView = mInflater.inflate(R.layout.homework_item, null);
//初始化组件
holder.icon=(ImageView) convertView. findViewById(R.id.homework_icon);
holder.name = (TextView) convertView.findViewById(R.id.homework_name);
holder.subject= (TextView) convertView.findViewById(R.id.homework_subject);
holder.teacher = (TextView) convertView.findViewById(R.id.homework_teacher);
holder.date = (TextView) convertView.findViewById(R.id.homework_submit_date);
convertView.setOnTouchListener(new OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
// TODO Auto-generated method stub
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
v.setBackgroundResource(R.drawable.item_seleted);
break;
case MotionEvent.ACTION_UP:
v.setBackgroundResource(R.drawable.item_unseleted);
break;
case MotionEvent.ACTION_CANCEL:
v.setBackgroundResource(R.drawable.item_unseleted);
break;
}
return true;
}
});
convertView.setTag(holder);

} else {
holder=(ViewHolder) convertView.getTag();
}

holder.icon.setBackgroundResource(R.drawable.ic_launcher);
holder.name.setText(".getName()");
holder.subject.setText(".getSubjectName()");
holder.teacher.setText(".getTeacherName()");
holder.date.setText(".getSubmitDate()");

return convertView;
}

class ViewHolder {
ImageView icon;
TextViewname;
TextViewsubject;
TextViewteacher;
TextViewdate;
}
}

class GuidePageAdapter extends PagerAdapter {

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

@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;
}

@Override
public int getItemPosition(Object object) {
// TODO Auto-generated method stub
return super.getItemPosition(object);
}

@Override
public void destroyItem(View arg0, int arg1, Object arg2) {
// TODO Auto-generated method stub
((ViewPager) arg0).removeView(pageViews.get(arg1));
}

@Override
public Object instantiateItem(View arg0, int arg1) {
// TODO Auto-generated method stub
((ViewPager) arg0).addView(pageViews.get(arg1));
return pageViews.get(arg1);
}

@Override
public void restoreState(Parcelable arg0, ClassLoader arg1) {
// TODO Auto-generated method stub

}

@Override
public Parcelable saveState() {
// TODO Auto-generated method stub
return null;
}

@Override
public void startUpdate(View arg0) {
// TODO Auto-generated method stub

}

@Override
public void finishUpdate(View arg0) {
// TODO Auto-generated method stub

}
}

class GuidePageChangeListener implements OnPageChangeListener {

@Override
public void onPageScrollStateChanged(int arg0) {
// TODO Auto-generated method stub
}

@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
// TODO Auto-generated method stub
}

@Override
public void onPageSelected(int arg0) {
for (int i = 0; i < buttons.length; i++) {
buttons[arg0]
.setBackgroundResource(R.drawable.button_selected);
if (arg0 != i) {
buttons[i]
.setBackgroundResource(R.drawable.button_unselected);
}
}
}
}

class GuideButtonClickListenerimplements OnClickListener {
private int index = 0;

public GuideButtonClickListener(int i) {
index = i;
}

@Override
public void onClick(View v) {
viewPager.setCurrentItem(index, true);
}
}

}

更多相关文章

随机推荐