如何实现类似IOS中 带分页效果的双向滚动scrollview

Question

最近要实现一个带分页效果的双向滚动scrollview，看IOS上有相关的demo不知道在android上如何实现，请各位高手指点一下，谢啦~demo效果展示如下http://v.youku.com/v_show/id_XNDEzNzAxMjYw.html

Answer 1

竖着的话就是用一个普通的scrollview就ok。横着滑动的话你可以监听屏幕的滑动事件来实现，当滑动触发时，切换不同的scrollview就行了。

Answer 2

这个是viewpager+listview啊 
代码
package cn.ablesky.activity;import java.util.ArrayList;
import java.util.List;import android.app.Activity;
import android.content.res.Resources;
import android.graphics.Color;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.os.Parcelable;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.text.Html;
import android.view.LayoutInflater;
import android.view.View;
import android.view.Window;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.TextView;
import cn.ablesky.adapter.AS_CTA_my_custom_course_adapter;
import cn.ablesky.util.ImageUtil;public class ASCourseTetailActivity extends Activity {
ImageView cta_header_iv;
TextView cta_little_icon_tv01;
TextView cta_little_icon_tv02;
TextView cta_little_icon_tv03;
TextView cta_little_icon_tv04;
TextView cta_account_balance_tv;
TextView cta_recharge_tv;
Button cta_my_custom_course_btn;
    Button cta_my_optional_course_btn;
    Button cta_my_study_record_btn;
    ViewPager mPager; //页卡内容
List<View> listViews;  //Tab页面列表
int offset = 0;// 动画图片偏移量
int currIndex = 0;// 当前页卡编号
int bmpW;// 动画图片宽度
    Resources resources;
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
// 无标题
getWindow().requestFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.course_tetail_activity);
        InitViewPager();
        cta_header_iv=(ImageView) findViewById(R.id.cta_header_iv);
        resources = ASCourseTetailActivity.this.getResources();    
        cta_header_iv.setBackgroundDrawable((Drawable)new BitmapDrawable(ImageUtil.getRoundedCornerBitmap(ImageUtil.drawableToBitmap(resources.getDrawable(R.drawable.cta_header)), 5)));
        cta_little_icon_tv01=(TextView) findViewById(R.id.cta_little_icon_tv01);
        cta_little_icon_tv01.setText(
         Html.fromHtml(
                        "<font color='#FF3333'>0</font>" +
                        "<font color='#334444'> / 18</font>"));
        cta_little_icon_tv02=(TextView) findViewById(R.id.cta_little_icon_tv02);
        cta_little_icon_tv02.setText(
                Html.fromHtml(
                        "<font color='#FF3333'>0</font>" +
                        "<font color='#334444'> / 18</font>"));
        cta_little_icon_tv03=(TextView) findViewById(R.id.cta_little_icon_tv03);
        cta_little_icon_tv03.setText(
         Html.fromHtml(
                        "<font color='#FF3333'>0</font>" +
                        "<font color='#334444'> / 18</font>"));
        cta_little_icon_tv04=(TextView) findViewById(R.id.cta_little_icon_tv04);
        cta_little_icon_tv04.setText(
         Html.fromHtml(
                        "<font color='#FF3333'>0</font>" +
                        "<font color='#334444'> / 18</font>"));
        cta_account_balance_tv=(TextView) findViewById(R.id.cta_account_balance_tv);
        cta_account_balance_tv.setText(
         Html.fromHtml(
                        "<font color='#334444'>账户余额:</font>" +
                        "<font color='#BB7744'> ￥120000</font>"));
        cta_recharge_tv=(TextView) findViewById(R.id.cta_recharge_tv);
        cta_recharge_tv.setText(
         Html.fromHtml(
                        "<font color='#334444'>| </font>" +
                        "<font color='#3FAFFA'>立即充值</font>"));
        

Answer 3

cta_my_custom_course_btn=(Button) findViewById(R.id.cta_my_custom_course_btn);
        cta_my_optional_course_btn=(Button) findViewById(R.id.cta_my_optional_course_btn);
        cta_my_study_record_btn=(Button) findViewById(R.id.cta_my_study_record_btn);
        cta_my_custom_course_btn.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) { 
cta_my_custom_course_btn.setBackgroundDrawable(resources.getDrawable(R.drawable.cta_selected_btn));
cta_my_custom_course_btn.setTextColor(Color.rgb(51,68,68));
cta_my_optional_course_btn.setBackgroundDrawable(resources.getDrawable(R.drawable.cta_btn));
cta_my_optional_course_btn.setTextColor(Color.rgb(255,255,255));
        cta_my_study_record_btn.setBackgroundDrawable(resources.getDrawable(R.drawable.cta_btn));
        cta_my_study_record_btn.setTextColor(Color.rgb(255,255,255));
        mPager.setCurrentItem(0);
}
});
        cta_my_optional_course_btn.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) { 
cta_my_custom_course_btn.setBackgroundDrawable(resources.getDrawable(R.drawable.cta_btn));
cta_my_custom_course_btn.setTextColor(Color.rgb(255,255,255));
cta_my_optional_course_btn.setBackgroundDrawable(resources.getDrawable(R.drawable.cta_selected_btn));
cta_my_optional_course_btn.setTextColor(Color.rgb(51,68,68));
cta_my_study_record_btn.setBackgroundDrawable(resources.getDrawable(R.drawable.cta_btn));
cta_my_study_record_btn.setTextColor(Color.rgb(255,255,255));
mPager.setCurrentItem(1);
}
});
        cta_my_study_record_btn.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) { 
cta_my_custom_course_btn.setBackgroundDrawable(resources.getDrawable(R.drawable.cta_btn));
cta_my_custom_course_btn.setTextColor(Color.rgb(255,255,255));
cta_my_optional_course_btn.setBackgroundDrawable(resources.getDrawable(R.drawable.cta_btn));
cta_my_optional_course_btn.setTextColor(Color.rgb(255,255,255));
        cta_my_study_record_btn.setBackgroundDrawable(resources.getDrawable(R.drawable.cta_selected_btn));
        cta_my_study_record_btn.setTextColor(Color.rgb(51,68,68));
        mPager.setCurrentItem(2);
}
});
    }
    /**
 * 初始化ViewPager
 */
private void InitViewPager() {
mPager = (ViewPager) findViewById(R.id.cta_vp);
listViews = new ArrayList<View>();
LayoutInflater mInflater = getLayoutInflater();
View inflate = mInflater.inflate(R.layout.cta_my_custom_course_view, null);
ListView ListView01 = (ListView) inflate.findViewById(R.id.cta_my_custom_course_lv);
ListView01.setAdapter(new AS_CTA_my_custom_course_adapter(ASCourseTetailActivity.this));
listViews.add(inflate);
listViews.add(mInflater.inflate(R.layout.cta_my_optional_course_lv, null));
listViews.add(mInflater.inflate(R.layout.cta_my_study_record_lv, null));
mPager.setAdapter(new MyPagerAdapter(listViews));
mPager.setCurrentItem(0);
mPager.setOnPageChangeListener(new MyOnPageChangeListener());
}
/**
 * 页卡切换监听
 */
public class MyOnPageChangeListener implements OnPageChangeListener { int one = offset * 2 + bmpW;// 页卡1 -> 页卡2 偏移量
int two = one * 2;// 页卡1 -> 页卡3 偏移量 @Override
public void onPageSelected(int arg0) {
Animation animation = null;
switch (arg0) {
case 0:
if (currIndex == 1) {
animation = new TranslateAnimation(one, 0, 0, 0);

} else if (currIndex == 2) {
animation = new TranslateAnimation(two, 0, 0, 0);
}
cta_my_custom_course_btn.setBackgroundDrawable(resources.getDrawable(R.drawable.cta_selected_btn));
cta_my_custom_course_btn.setTextColor(Color.rgb(51,68,68));
cta_my_optional_course_btn.setBackgroundDrawable(resources.getDrawable(R.drawable.cta_btn));
cta_my_optional_course_btn.setTextColor(Color.rgb(255,255,255));
        cta_my_study_record_btn.setBackgroundDrawable(resources.getDrawable(R.drawable.cta_btn));
        cta_my_study_record_btn.setTextColor(Color.rgb(255,255,255));
break;
case 1:
if (currIndex == 0) {
animation = new TranslateAnimation(offset, one, 0, 0);
} else if (currIndex == 2) {
animation = new TranslateAnimation(two, one, 0, 0);
}
cta_my_custom_course_btn.setBackgroundDrawable(resources.getDrawable(R.drawable.cta_btn));
cta_my_custom_course_btn.setTextColor(Color.rgb(255,255,255));
cta_my_optional_course_btn.setBackgroundDrawable(resources.getDrawable(R.drawable.cta_selected_btn));
cta_my_optional_course_btn.setTextColor(Color.rgb(51,68,68));
cta_my_study_record_btn.setBackgroundDrawable(resources.getDrawable(R.drawable.cta_btn));
cta_my_study_record_btn.setTextColor(Color.rgb(255,255,255));
break;
case 2:
if (currIndex == 0) {
animation = new TranslateAnimation(offset, two, 0, 0);
} else if (currIndex == 1) {
animation = new TranslateAnimation(one, two, 0, 0);
}
cta_my_custom_course_btn.setBackgroundDrawable(resources.getDrawable(R.drawable.cta_btn));
cta_my_custom_course_btn.setTextColor(Color.rgb(255,255,255));
cta_my_optional_course_btn.setBackgroundDrawable(resources.getDrawable(R.drawable.cta_btn));
cta_my_optional_course_btn.setTextColor(Color.rgb(255,255,255));
        cta_my_study_record_btn.setBackgroundDrawable(resources.getDrawable(R.drawable.cta_selected_btn));
        cta_my_study_record_btn.setTextColor(Color.rgb(51,68,68));
break;
}
currIndex = arg0;
animation.setFillAfter(true);// True:图片停在动画结束位置
animation.setDuration(300);
//cursor.startAnimation(animation);
} @Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
} @Override
public void onPageScrollStateChanged(int arg0) {
}
}
/**
 * ViewPager适配器
 */
public class MyPagerAdapter extends PagerAdapter {
public List<View> mListViews; public MyPagerAdapter(List<View> mListViews) {
this.mListViews = mListViews;
} @Override
public void destroyItem(View arg0, int arg1, Object arg2) {
((ViewPager) arg0).removeView(mListViews.get(arg1));
} @Override
public void finishUpdate(View arg0) {
} @Override
public int getCount() {
return mListViews.size();
} @Override
public Object instantiateItem(View arg0, int arg1) {
((ViewPager) arg0).addView(mListViews.get(arg1), 0);
return mListViews.get(arg1);
} @Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == (arg1);
} @Override
public void restoreState(Parcelable arg0, ClassLoader arg1) {
} @Override
public Parcelable saveState() {
return null;
} @Override
public void startUpdate(View arg0) {
}
}

@Override
public void finish() {
super.finish();
System.exit(0);
}
}

Answer 4

adapter的
package cn.ablesky.adapter;import cn.ablesky.activity.R;import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;public class AS_CTA_my_custom_course_adapter extends BaseAdapter{ LayoutInflater mInflater;
public AS_CTA_my_custom_course_adapter(Context mContext) {
super();
this.mInflater = LayoutInflater.from(mContext);
}
public int getCount() {
// TODO Auto-generated method stub
return 10;
} @Override
public Object getItem(int position) {
// TODO Auto-generated method stub
return null;
} @Override
public long getItemId(int position) {
// TODO Auto-generated method stub
return 0;
} @Override
public View getView(int position, View convertView, ViewGroup parent) {
convertView = mInflater.inflate(
R.layout.cta_my_custom_course_item, null);
return convertView;
}
static class ViewHolder {
ImageView cta_my_custom_course_iv;
TextView cta_my_custom_course_name_tv;
Button cta_my_custom_course_btn;
}
}

Answer 5

那如何实现那种类似Android Launcher Workspace的分页滑动效果，就是view可以随手势滑动实时的变化，当view移动超过一定距离后直接切换到下一个view，没有超过那个距离就弹回原来的位置？

Answer 6

请问，这个demo 你有了没有？能不能分享下，邮箱[email protected] q:346148849