moira 2011-12-15
最近在做一个简单的展示界面时,遇到了一个比较棘手的问题。由于要展示多项内容,所以使用ViewFlipper作为水平滑动容器;而每项内容中由于许多文本较长,因此需要使用ScrollView作为垂直滑动容器。基本的界面布局大致如下:
外部文件common_list_view.xml:
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/geyan_query_view_layout" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" android:background="@drawable/mid_bg"> <LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_marginTop="43dip" android:orientation="vertical" android:gravity="top" android:layout_gravity="top"> <Gallery android:id="@+id/gallery_data" android:layout_width="fill_parent" android:layout_height="fill_parent" android:gravity="top" android:layout_gravity="top" android:spacing="60dip" android:paddingLeft="6dip" android:paddingRight="6dip" > </Gallery> </LinearLayout> <ImageView android:id="@+id/main_background" android:layout_width="fill_parent" android:layout_height="fill_parent"/> <include layout="@layout/common_title_view" android:id="@+id/title"/> </RelativeLayout>
内部文件common_info_view.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" android:id="@+id/linear"> <TextView android:id="@+id/text_title" android:layout_width="fill_parent" android:layout_height="wrap_content" android:padding="5dip" android:layout_marginTop="5dip" android:gravity="center" android:textSize="20sp" android:textStyle="bold" android:textColor="#181712" /> <ScrollView android:id="@+id/scroll" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_marginBottom="5dip" android:fadeScrollbars="true" > <TextView android:id="@+id/text_detail" android:layout_width="fill_parent" android:layout_height="wrap_content" android:lineSpacingMultiplier="1.3" android:textSize="18sp" android:textColor="#181712" android:singleLine="false" /> </ScrollView> </LinearLayout>
由于ViewFlipper在外,ScrollView在内,因此一般的做法是定义一个手势响应类来处理响应事件,并将响应事件的处理交给内层的ScrollView。大致代码如下:
import android.app.Activity; import android.os.Bundle; import android.util.Log; import android.view.GestureDetector; import android.view.GestureDetector.SimpleOnGestureListener; import android.view.LayoutInflater; import android.view.Menu; import android.view.MotionEvent; import android.view.View; import android.view.Window; import android.widget.TextView; import android.widget.Toast; import android.widget.ViewFlipper; public class Test1 extends Activity { private ViewFlipper viewFlipper; private String[] descriptionsArray; private String[] titleArray; private int selectedPosition; private TextView textViewTitle; private TextView textViewContent; private FriendlyScrollView scroll; private LayoutInflater mInflater; private GestureDetector gestureDetector; @Override protected void onCreate(Bundle savedInstanceState) { // TODO Auto-generated method stub requestWindowFeature(Window.FEATURE_NO_TITLE); setContentView(R.layout.common_info_list_view); InitUI(); super.onCreate(savedInstanceState); Toast.makeText(this, R.string.hello, Toast.LENGTH_SHORT).show(); } @Override public boolean onCreateOptionsMenu(Menu menu) { // TODO Auto-generated method stub super.onCreateOptionsMenu(menu); return false; } @Override public void onBackPressed() { // TODO Auto-generated method stub finish(); } private void InitUI(){ viewFlipper = (ViewFlipper) findViewById(R.id.viewflipper_data); mInflater = LayoutInflater.from(this); fillDate(); viewFlipper.addView(getContentView()); } private void fillDate(){ selectedPosition = 0; titleArray = getResources().getStringArray(R.array.title_array); descriptionsArray = getResources().getStringArray(R.array.description_array); gestureDetector = new GestureDetector(new CommonGestureListener()); } private View getContentView() { View contentView = new View(this); contentView = mInflater.inflate(R.layout.common_info_item_view, null); textViewTitle = (TextView) contentView.findViewById(R.id.text_title); textViewContent = (TextView) contentView.findViewById(R.id.text_detail); textViewTitle.setText(titleArray[selectedPosition]); textViewTitle.setPadding(10, 0, 10, 0); textViewContent.setText(descriptionsArray[selectedPosition]); textViewContent.setPadding(10, 5, 10, 5); scroll = (FriendlyScrollView) contentView.findViewById(R.id.scroll); scroll.setOnTouchListener(onTouchListener); scroll.setGestureDetector(gestureDetector); return contentView; } private View.OnTouchListener onTouchListener = new View.OnTouchListener() { public boolean onTouch(View v, MotionEvent event) { // TODO Auto-generated method stub return gestureDetector.onTouchEvent(event); } }; public class CommonGestureListener extends SimpleOnGestureListener { @Override public boolean onDown(MotionEvent e) { // TODO Auto-generated method stub Log.d("QueryViewFlipper", "====> Jieqi: do onDown..."); return false; } @Override public void onShowPress(MotionEvent e) { // TODO Auto-generated method stub Log.d("QueryViewFlipper", "====> Jieqi: do onShowPress..."); super.onShowPress(e); } @Override public void onLongPress(MotionEvent e) { // TODO Auto-generated method stub Log.d("QueryViewFlipper", "----> Jieqi: do onLongPress..."); } @Override public boolean onSingleTapConfirmed(MotionEvent e) { // TODO Auto-generated method stub Log.d("QueryViewFlipper", "====> Jieqi: do onSingleTapConfirmed..."); return false; } @Override public boolean onSingleTapUp(MotionEvent e) { // TODO Auto-generated method stub Log.d("QueryViewFlipper", "====> Jieqi: do onSingleTapUp..."); return false; } @Override public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY){ // TODO Auto-generated method stub Log.d("QueryViewFlipper", "====> Jieqi: do onFling..."); if (e1.getX() - e2.getX() > 100 && Math.abs(velocityX) > 50) { //向左 selectedPosition = selectedPosition + 1 < titleArray.length ? (selectedPosition + 1) : 0; viewFlipper.addView(getContentView()); viewFlipper.setInAnimation(AnimationControl.inFromRightAnimation()); viewFlipper.setOutAnimation(AnimationControl.outToLeftAnimation()); viewFlipper.showNext(); viewFlipper.removeViewAt(0); } else if (e2.getX() - e1.getX() > 100 && Math.abs(velocityX) > 50) { //向右 selectedPosition = selectedPosition > 0 ? (selectedPosition - 1) : (titleArray.length - 1); viewFlipper.addView(getContentView()); viewFlipper.setInAnimation(AnimationControl.inFromLeftAnimation()); viewFlipper.setOutAnimation(AnimationControl.outToRightAnimation()); viewFlipper.showNext(); viewFlipper.removeViewAt(0); } return true; } @Override public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) { // TODO Auto-generated method stub Log.d("QueryViewFlipper", "====> Jieqi: do onScroll..."); return super.onScroll(e1, e2, distanceX, distanceY); } } }
这个时候问题出现了,通过Log显示,当ScrollView中内容太短的时候,ScrollView不会触发OnScroll和OnFling事件,导致ViewFlipper左右滑动不响应。(当然后来的另一个测试表明这个问题在ListView上不存在)
为了解决这一个问题,我重新自定义了一个FriendlyScrollView类,来重写ScrollView的onTouchEvent和dispatchTouchEvent方法,具体如下:
import android.content.Context; import android.util.AttributeSet; import android.view.GestureDetector; import android.view.MotionEvent; import android.widget.ScrollView; public class FriendlyScrollView extends ScrollView { GestureDetector gestureDetector; public FriendlyScrollView(Context context) { super(context); // TODO Auto-generated constructor stub } public FriendlyScrollView(Context context, AttributeSet attrs) { super(context, attrs); // TODO Auto-generated constructor stub } public FriendlyScrollView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); // TODO Auto-generated constructor stub } public void setGestureDetector(GestureDetector gestureDetector) { this.gestureDetector = gestureDetector; } @Override public boolean onTouchEvent(MotionEvent event) { super.onTouchEvent(event); return gestureDetector.onTouchEvent(event); } @Override public boolean dispatchTouchEvent(MotionEvent ev){ gestureDetector.onTouchEvent(ev); super.dispatchTouchEvent(ev); return true; } }
然后将common_info_view.xml和程序中的ScrollView改成FriendlyScrollView,终于解决了这个问题。
http://disanji.net/2011/02/19/solve-viewflipper-scrollview-flip-problem/