如何像画廊一样实现 HorizontalScrollView? [英] How to implement HorizontalScrollView like Gallery?
本文介绍了如何像画廊一样实现 HorizontalScrollView?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想用Gallery的一些功能实现Horizontal ScrollView，
在图库中，滚动在一定距离处成对排列，即如果我们在屏幕上显示三张图像，单击最后一张图像将排列在中心.
我将如何实现如上所述的 HorizontalSCrollView?
解决方案
试试这个代码:
activity_main.xml
<块引用><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="fill_parent"android:layout_height="100dip"工具:context=".MainActivity" ><水平滚动视图android:id="@+id/hsv"android:layout_width="fill_parent"android:layout_height="wrap_content"android:layout_alignParentTop="true"机器人:fillViewport =真"机器人:measureAllChildren =假"机器人:滚动条=无"><线性布局android:id="@+id/innerLay"android:layout_width="wrap_content"android:layout_height="wrap_content"机器人:重力=center_vertical"机器人:方向=水平"><线性布局android:id="@+id/asthma_action_plan"android:layout_width="wrap_content"android:layout_height="wrap_content"机器人:重力=中心"机器人:方向=垂直"><相对布局android:layout_width="fill_parent"android:layout_height="match_parent" ><图像视图android:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@drawable/action_plan"/><文本视图android:layout_width="0.2dp"android:layout_height="fill_parent"android:layout_alignParentRight="true"android:background="@drawable/ln"/></RelativeLayout></LinearLayout><线性布局android:id="@+id/controled_medication"android:layout_width="wrap_content"android:layout_height="wrap_content"机器人:重力=中心"机器人:方向=垂直"><相对布局android:layout_width="fill_parent"android:layout_height="match_parent" ><图像视图android:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@drawable/控制"/><文本视图android:layout_width="0.2dp"android:layout_height="fill_parent"android:layout_alignParentRight="true"android:background="@drawable/ln"/></RelativeLayout></LinearLayout><线性布局android:id="@+id/as_needed_medication"android:layout_width="wrap_content"android:layout_height="wrap_content"机器人:重力=中心"机器人:方向=垂直"><相对布局android:layout_width="fill_parent"android:layout_height="match_parent"机器人:方向=水平"><图像视图android:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@drawable/as_needed"/><文本视图android:layout_width="0.2dp"android:layout_height="fill_parent"android:layout_alignParentRight="true"android:background="@drawable/ln"/></RelativeLayout></LinearLayout><线性布局android:id="@+id/rescue_medication"android:layout_width="wrap_content"android:layout_height="wrap_content"机器人:重力=中心"机器人:方向=垂直"><相对布局android:layout_width="fill_parent"android:layout_height="match_parent" ><图像视图android:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@drawable/rescue"/><文本视图android:layout_width="0.2dp"android:layout_height="fill_parent"android:layout_alignParentRight="true"android:background="@drawable/ln"/></RelativeLayout></LinearLayout><线性布局android:id="@+id/your_symptoms"android:layout_width="wrap_content"android:layout_height="wrap_content"机器人:重力=中心"机器人:方向=垂直"><相对布局android:layout_width="fill_parent"android:layout_height="match_parent" ><图像视图android:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@drawable/症状"/><文本视图android:layout_width="0.2dp"android:layout_height="fill_parent"android:layout_alignParentRight="true"android:background="@drawable/ln"/></RelativeLayout></LinearLayout><线性布局android:id="@+id/your_triggers"android:layout_width="wrap_content"android:layout_height="wrap_content"机器人:重力=中心"机器人:方向=垂直"><相对布局android:layout_width="fill_parent"android:layout_height="match_parent" ><图像视图android:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@drawable/触发器"/><文本视图android:layout_width="0.2dp"android:layout_height="fill_parent"android:layout_alignParentRight="true"android:background="@drawable/ln"/></RelativeLayout></LinearLayout><线性布局android:id="@+id/wheeze_rate"android:layout_width="wrap_content"android:layout_height="wrap_content"机器人:重力=中心"机器人:方向=垂直"><相对布局android:layout_width="fill_parent"android:layout_height="match_parent" ><图像视图android:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@drawable/wheeze_rate"/><文本视图android:layout_width="0.2dp"android:layout_height="fill_parent"android:layout_alignParentRight="true"android:background="@drawable/ln"/></RelativeLayout></LinearLayout><线性布局android:id="@+id/peak_flow"android:layout_width="wrap_content"android:layout_height="wrap_content"机器人:重力=中心"机器人:方向=垂直"><相对布局android:layout_width="fill_parent"android:layout_height="match_parent" ><图像视图android:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@drawable/peak_flow"/><文本视图android:layout_width="0.2dp"android:layout_height="fill_parent"android:layout_alignParentRight="true"android:background="@drawable/ln"/></RelativeLayout></LinearLayout></LinearLayout></HorizontalScrollView><文本视图android:layout_width="fill_parent"android:layout_height="0.2dp"android:layout_alignParentRight="true"android:layout_below="@+id/hsv"android:background="@drawable/ln"/><线性布局android:id="@+id/prev"android:layout_width="wrap_content"android:layout_height="fill_parent"机器人:layout_alignParentLeft =真"机器人:layout_centerVertical =真"机器人:paddingLeft =5dip"机器人:paddingRight="5dip"android:descendantFocusability="blocksDescendants" ><图像视图android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center_vertical"android:src="@drawable/prev_arrow"/></LinearLayout><线性布局android:id="@+id/下一个"android:layout_width="wrap_content"android:layout_height="fill_parent"android:layout_alignParentRight="true"机器人:layout_centerVertical =真"机器人:paddingLeft =5dip"机器人:paddingRight="5dip"android:descendantFocusability="blocksDescendants" ><图像视图android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center_vertical"android:src="@drawable/next_arrow"/></LinearLayout></RelativeLayout>grid_item.xml
<块引用><图像视图android:id="@+id/imageView1"android:layout_width="fill_parent"android:layout_height="100dp"android:src="@drawable/ic_launcher"/></LinearLayout>MainActivity.java
import java.util.ArrayList;导入 android.app.Activity;导入 android.graphics.Rect;导入 android.os.Bundle;导入 android.os.Handler;导入 android.view.Display;导入 android.view.GestureDetector;导入 android.view.GestureDetector.SimpleOnGestureListener;导入 android.view.MotionEvent;导入 android.view.View;导入 android.view.View.OnTouchListener;导入 android.widget.HorizontalScrollView;导入 android.widget.LinearLayout;导入 android.widget.LinearLayout.LayoutParams;公共类 MainActivity 扩展 Activity {线性布局哮喘行动计划，受控药物，作为需要的药物，救援药物、你的症状、你的触发器、喘息率、峰值流量；LayoutParams 参数；LinearLayout next, prev;内部视图宽度；GestureDetectorgestureDetector = null;HorizontalScrollView 水平滚动视图；ArrayList布局；int parentLeft, parentRight;int mWidth;int currPosition, prevPosition;@覆盖protected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);prev = (LinearLayout) findViewById(R.id.prev);next = (LinearLayout) findViewById(R.id.next);水平滚动视图 = (HorizontalScrollView) findViewById(R.id.hsv);手势检测器 = 新手势检测器(新的我的手势检测器())；哮喘行动计划 = (LinearLayout) findViewById(R.id.asthma_action_plan);ControlledMedication = (LinearLayout) findViewById(R.id.controlled_medication);asNeededMedication = (LinearLayout) findViewById(R.id.as_needed_medication);rescueMedication = (LinearLayout) findViewById(R.id.rescue_medication);yourSymtoms = (LinearLayout) findViewById(R.id.your_symptoms);yourTriggers = (LinearLayout) findViewById(R.id.your_triggers);wheezeRate = (LinearLayout) findViewById(R.id.wheeze_rate);peakFlow = (LinearLayout) findViewById(R.id.peak_flow);Display display = getWindowManager().getDefaultDisplay();mWidth = display.getWidth();//已弃用视图宽度 = mWidth/3;layouts = new ArrayList();params = new LayoutParams(viewWidth, LayoutParams.WRAP_CONTENT);哮喘行动计划.setLayoutParams(params);ControlledMedication.setLayoutParams(params);asNeededMedication.setLayoutParams(params);rescueMedication.setLayoutParams(params);yourSymtoms.setLayoutParams(params);yourTriggers.setLayoutParams(params);wheezeRate.setLayoutParams(params);peakFlow.setLayoutParams(params);layouts.add(asthmaActionPlan);layouts.add(受控药物)；layouts.add(asNeededMedication);layouts.add(rescueMedication);layouts.add(yourSymtoms);layouts.add(yourTriggers);layouts.add(wheezeRate);layouts.add(peakFlow);next.setOnClickListener(new View.OnClickListener() {@覆盖public void onClick(View v) {new Handler().postDelayed(new Runnable() {公共无效运行(){水平滚动视图.smoothScrollTo((int)horizontalScrollView.getScrollX()+ 视图宽度，(int)horizontalScrollView.getScrollY());}}, 100L);}});prev.setOnClickListener(new View.OnClickListener() {@覆盖public void onClick(View v) {new Handler().postDelayed(new Runnable() {公共无效运行(){水平滚动视图.smoothScrollTo((int)horizontalScrollView.getScrollX()- 视图宽度，(int)horizontalScrollView.getScrollY());}}, 100L);}});horizontalScrollView.setOnTouchListener(new OnTouchListener() {@覆盖公共布尔 onTouch(查看 v，MotionEvent 事件){如果(gestureDetector.onTouchEvent(事件)){返回真；}返回假；}});}类 MyGestureDetector 扩展 SimpleOnGestureListener {@覆盖公共布尔 onFling(MotionEvent e1, MotionEvent e2, float velocityX,浮动速度Y) {如果 (e1.getX() < e2.getX()) {currPosition = getVisibleViews("left");} 别的 {currPosition = getVisibleViews("right");}horizontalScrollView.smoothScrollTo(layouts.get(currPosition).getLeft(), 0);返回真；}}public int getVisibleViews(字符串方向){Rect hitRect = new Rect();int 位置 = 0;int rightCounter = 0;for (int i = 0; i < layouts.size(); i++) {如果 (layouts.get(i).getLocalVisibleRect(hitRect)) {如果(方向.等于(左")){位置 = i;休息;} else if (direction.equals("right")) {右计数器++；位置 = i;如果(右计数器 == 2)休息;}}}返回位置；}} 如果有任何问题请告诉我享受...
I want to implement Horizontal ScrollView with some features of Gallery,
In Gallery the scroll made at some distance it arrange in pair, i.e If we have three images shown in screen, clicking last image will arrange at center.
How would I implement HorizontalSCrollView as mentioned?
解决方案
Try this code:
activity_main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="fill_parent" android:layout_height="100dip" tools:context=".MainActivity" > <HorizontalScrollView android:id="@+id/hsv" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:fillViewport="true" android:measureAllChildren="false" android:scrollbars="none" > <LinearLayout android:id="@+id/innerLay" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center_vertical" android:orientation="horizontal" > <LinearLayout android:id="@+id/asthma_action_plan" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:orientation="vertical" > <RelativeLayout android:layout_width="fill_parent" android:layout_height="match_parent" > <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/action_plan" /> <TextView android:layout_width="0.2dp" android:layout_height="fill_parent" android:layout_alignParentRight="true" android:background="@drawable/ln" /> </RelativeLayout> </LinearLayout> <LinearLayout android:id="@+id/controlled_medication" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:orientation="vertical" > <RelativeLayout android:layout_width="fill_parent" android:layout_height="match_parent" > <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/controlled" /> <TextView android:layout_width="0.2dp" android:layout_height="fill_parent" android:layout_alignParentRight="true" android:background="@drawable/ln" /> </RelativeLayout> </LinearLayout> <LinearLayout android:id="@+id/as_needed_medication" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:orientation="vertical" > <RelativeLayout android:layout_width="fill_parent" android:layout_height="match_parent" android:orientation="horizontal" > <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/as_needed" /> <TextView android:layout_width="0.2dp" android:layout_height="fill_parent" android:layout_alignParentRight="true" android:background="@drawable/ln" /> </RelativeLayout> </LinearLayout> <LinearLayout android:id="@+id/rescue_medication" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:orientation="vertical" > <RelativeLayout android:layout_width="fill_parent" android:layout_height="match_parent" > <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/rescue" /> <TextView android:layout_width="0.2dp" android:layout_height="fill_parent" android:layout_alignParentRight="true" android:background="@drawable/ln" /> </RelativeLayout> </LinearLayout> <LinearLayout android:id="@+id/your_symptoms" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:orientation="vertical" > <RelativeLayout android:layout_width="fill_parent" android:layout_height="match_parent" > <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/symptoms" /> <TextView android:layout_width="0.2dp" android:layout_height="fill_parent" android:layout_alignParentRight="true" android:background="@drawable/ln" /> </RelativeLayout> </LinearLayout> <LinearLayout android:id="@+id/your_triggers" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:orientation="vertical" > <RelativeLayout android:layout_width="fill_parent" android:layout_height="match_parent" > <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/triggers" /> <TextView android:layout_width="0.2dp" android:layout_height="fill_parent" android:layout_alignParentRight="true" android:background="@drawable/ln" /> </RelativeLayout> </LinearLayout> <LinearLayout android:id="@+id/wheeze_rate" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:orientation="vertical" > <RelativeLayout android:layout_width="fill_parent" android:layout_height="match_parent" > <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/wheeze_rate" /> <TextView android:layout_width="0.2dp" android:layout_height="fill_parent" android:layout_alignParentRight="true" android:background="@drawable/ln" /> </RelativeLayout> </LinearLayout> <LinearLayout android:id="@+id/peak_flow" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:orientation="vertical" > <RelativeLayout android:layout_width="fill_parent" android:layout_height="match_parent" > <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/peak_flow" /> <TextView android:layout_width="0.2dp" android:layout_height="fill_parent" android:layout_alignParentRight="true" android:background="@drawable/ln" /> </RelativeLayout> </LinearLayout> </LinearLayout> </HorizontalScrollView> <TextView android:layout_width="fill_parent" android:layout_height="0.2dp" android:layout_alignParentRight="true" android:layout_below="@+id/hsv" android:background="@drawable/ln" /> <LinearLayout android:id="@+id/prev" android:layout_width="wrap_content" android:layout_height="fill_parent" android:layout_alignParentLeft="true" android:layout_centerVertical="true" android:paddingLeft="5dip" android:paddingRight="5dip" android:descendantFocusability="blocksDescendants" > <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:src="@drawable/prev_arrow" /> </LinearLayout> <LinearLayout android:id="@+id/next" android:layout_width="wrap_content" android:layout_height="fill_parent" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:paddingLeft="5dip" android:paddingRight="5dip" android:descendantFocusability="blocksDescendants" > <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:src="@drawable/next_arrow" /> </LinearLayout> </RelativeLayout>
grid_item.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <ImageView android:id="@+id/imageView1" android:layout_width="fill_parent" android:layout_height="100dp" android:src="@drawable/ic_launcher" /> </LinearLayout>
MainActivity.java
import java.util.ArrayList;
import android.app.Activity;
import android.graphics.Rect;
import android.os.Bundle;
import android.os.Handler;
import android.view.Display;
import android.view.GestureDetector;
import android.view.GestureDetector.SimpleOnGestureListener;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.widget.HorizontalScrollView;
import android.widget.LinearLayout;
import android.widget.LinearLayout.LayoutParams;
public class MainActivity extends Activity {
LinearLayout asthmaActionPlan, controlledMedication, asNeededMedication,
rescueMedication, yourSymtoms, yourTriggers, wheezeRate, peakFlow;
LayoutParams params;
LinearLayout next, prev;
int viewWidth;
GestureDetector gestureDetector = null;
HorizontalScrollView horizontalScrollView;
ArrayList<LinearLayout> layouts;
int parentLeft, parentRight;
int mWidth;
int currPosition, prevPosition;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
prev = (LinearLayout) findViewById(R.id.prev);
next = (LinearLayout) findViewById(R.id.next);
horizontalScrollView = (HorizontalScrollView) findViewById(R.id.hsv);
gestureDetector = new GestureDetector(new MyGestureDetector());
asthmaActionPlan = (LinearLayout) findViewById(R.id.asthma_action_plan);
controlledMedication = (LinearLayout) findViewById(R.id.controlled_medication);
asNeededMedication = (LinearLayout) findViewById(R.id.as_needed_medication);
rescueMedication = (LinearLayout) findViewById(R.id.rescue_medication);
yourSymtoms = (LinearLayout) findViewById(R.id.your_symptoms);
yourTriggers = (LinearLayout) findViewById(R.id.your_triggers);
wheezeRate = (LinearLayout) findViewById(R.id.wheeze_rate);
peakFlow = (LinearLayout) findViewById(R.id.peak_flow);
Display display = getWindowManager().getDefaultDisplay();
mWidth = display.getWidth(); // deprecated
viewWidth = mWidth / 3;
layouts = new ArrayList<LinearLayout>();
params = new LayoutParams(viewWidth, LayoutParams.WRAP_CONTENT);
asthmaActionPlan.setLayoutParams(params);
controlledMedication.setLayoutParams(params);
asNeededMedication.setLayoutParams(params);
rescueMedication.setLayoutParams(params);
yourSymtoms.setLayoutParams(params);
yourTriggers.setLayoutParams(params);
wheezeRate.setLayoutParams(params);
peakFlow.setLayoutParams(params);
layouts.add(asthmaActionPlan);
layouts.add(controlledMedication);
layouts.add(asNeededMedication);
layouts.add(rescueMedication);
layouts.add(yourSymtoms);
layouts.add(yourTriggers);
layouts.add(wheezeRate);
layouts.add(peakFlow);
next.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
new Handler().postDelayed(new Runnable() {
public void run() {
horizontalScrollView.smoothScrollTo(
(int) horizontalScrollView.getScrollX()
+ viewWidth,
(int) horizontalScrollView.getScrollY());
}
}, 100L);
}
});
prev.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
new Handler().postDelayed(new Runnable() {
public void run() {
horizontalScrollView.smoothScrollTo(
(int) horizontalScrollView.getScrollX()
- viewWidth,
(int) horizontalScrollView.getScrollY());
}
}, 100L);
}
});
horizontalScrollView.setOnTouchListener(new OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
if (gestureDetector.onTouchEvent(event)) {
return true;
}
return false;
}
});
}
class MyGestureDetector extends SimpleOnGestureListener {
@Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
float velocityY) {
if (e1.getX() < e2.getX()) {
currPosition = getVisibleViews("left");
} else {
currPosition = getVisibleViews("right");
}
horizontalScrollView.smoothScrollTo(layouts.get(currPosition)
.getLeft(), 0);
return true;
}
}
public int getVisibleViews(String direction) {
Rect hitRect = new Rect();
int position = 0;
int rightCounter = 0;
for (int i = 0; i < layouts.size(); i++) {
if (layouts.get(i).getLocalVisibleRect(hitRect)) {
if (direction.equals("left")) {
position = i;
break;
} else if (direction.equals("right")) {
rightCounter++;
position = i;
if (rightCounter == 2)
break;
}
}
}
return position;
}
}
Let me know if any issue enjoy...
这篇关于如何像画廊一样实现 HorizontalScrollView?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
