如何像 Gallery 一样实现 HorizontalScrollView？
Posted
技术标签:
【中文标题】如何像 Gallery 一样实现 HorizontalScrollView？【英文标题】：How to implement HorizontalScrollView like Gallery? 【发布时间】：2013-09-10 12:07:28 【问题描述】：我想用Gallery的一些功能实现Horizontal ScrollView，
在画廊中，滚动在一定距离处成对排列，即如果我们在屏幕上显示三个图像，单击最后一个图像将排列在中心。
如前所述，我将如何实现HorizontalSCrollView？
【问题讨论】：
***.com/a/18075811/726863 你能帮我解决这个question吗？ :D @Skizo：没有从第二个答案中找到解决方案？ 耶，现在我得到了解决方案 好 ... :D，你能与我分享该解决方案的链接或代码吗？ 【参考方案1】：试试这个代码：
activity_main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_ android:layout_ tools:context=".MainActivity" > <HorizontalScrollView android:id="@+id/hsv" android:layout_ android:layout_ android:layout_alignParentTop="true" android:fillViewport="true" android:measureAllChildren="false" android:scrollbars="none" > <LinearLayout android:id="@+id/innerLay" android:layout_ android:layout_ android:gravity="center_vertical" android:orientation="horizontal" > <LinearLayout android:id="@+id/asthma_action_plan" android:layout_ android:layout_ android:gravity="center" android:orientation="vertical" > <RelativeLayout android:layout_ android:layout_ > <ImageView android:layout_ android:layout_ android:src="@drawable/action_plan" /> <TextView android:layout_ android:layout_ android:layout_alignParentRight="true" android:background="@drawable/ln" /> </RelativeLayout> </LinearLayout> <LinearLayout android:id="@+id/controlled_medication" android:layout_ android:layout_ android:gravity="center" android:orientation="vertical" > <RelativeLayout android:layout_ android:layout_ > <ImageView android:layout_ android:layout_ android:src="@drawable/controlled" /> <TextView android:layout_ android:layout_ android:layout_alignParentRight="true" android:background="@drawable/ln" /> </RelativeLayout> </LinearLayout> <LinearLayout android:id="@+id/as_needed_medication" android:layout_ android:layout_ android:gravity="center" android:orientation="vertical" > <RelativeLayout android:layout_ android:layout_ android:orientation="horizontal" > <ImageView android:layout_ android:layout_ android:src="@drawable/as_needed" /> <TextView android:layout_ android:layout_ android:layout_alignParentRight="true" android:background="@drawable/ln" /> </RelativeLayout> </LinearLayout> <LinearLayout android:id="@+id/rescue_medication" android:layout_ android:layout_ android:gravity="center" android:orientation="vertical" > <RelativeLayout android:layout_ android:layout_ > <ImageView android:layout_ android:layout_ android:src="@drawable/rescue" /> <TextView android:layout_ android:layout_ android:layout_alignParentRight="true" android:background="@drawable/ln" /> </RelativeLayout> </LinearLayout> <LinearLayout android:id="@+id/your_symptoms" android:layout_ android:layout_ android:gravity="center" android:orientation="vertical" > <RelativeLayout android:layout_ android:layout_ > <ImageView android:layout_ android:layout_ android:src="@drawable/symptoms" /> <TextView android:layout_ android:layout_ android:layout_alignParentRight="true" android:background="@drawable/ln" /> </RelativeLayout> </LinearLayout> <LinearLayout android:id="@+id/your_triggers" android:layout_ android:layout_ android:gravity="center" android:orientation="vertical" > <RelativeLayout android:layout_ android:layout_ > <ImageView android:layout_ android:layout_ android:src="@drawable/triggers" /> <TextView android:layout_ android:layout_ android:layout_alignParentRight="true" android:background="@drawable/ln" /> </RelativeLayout> </LinearLayout> <LinearLayout android:id="@+id/wheeze_rate" android:layout_ android:layout_ android:gravity="center" android:orientation="vertical" > <RelativeLayout android:layout_ android:layout_ > <ImageView android:layout_ android:layout_ android:src="@drawable/wheeze_rate" /> <TextView android:layout_ android:layout_ android:layout_alignParentRight="true" android:background="@drawable/ln" /> </RelativeLayout> </LinearLayout> <LinearLayout android:id="@+id/peak_flow" android:layout_ android:layout_ android:gravity="center" android:orientation="vertical" > <RelativeLayout android:layout_ android:layout_ > <ImageView android:layout_ android:layout_ android:src="@drawable/peak_flow" /> <TextView android:layout_ android:layout_ android:layout_alignParentRight="true" android:background="@drawable/ln" /> </RelativeLayout> </LinearLayout> </LinearLayout> </HorizontalScrollView> <TextView android:layout_ android:layout_ android:layout_alignParentRight="true" android:layout_below="@+id/hsv" android:background="@drawable/ln" /> <LinearLayout android:id="@+id/prev" android:layout_ android:layout_ android:layout_alignParentLeft="true" android:layout_centerVertical="true" android:paddingLeft="5dip" android:paddingRight="5dip" android:descendantFocusability="blocksDescendants" > <ImageView android:layout_ android:layout_ android:layout_gravity="center_vertical" android:src="@drawable/prev_arrow" /> </LinearLayout> <LinearLayout android:id="@+id/next" android:layout_ android:layout_ android:layout_alignParentRight="true" android:layout_centerVertical="true" android:paddingLeft="5dip" android:paddingRight="5dip" android:descendantFocusability="blocksDescendants" > <ImageView android:layout_ android:layout_ 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_ android:layout_ android:orientation="vertical" > <ImageView android:id="@+id/imageView1" android:layout_ android:layout_ 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;
如果有任何问题请告诉我 享受...
【讨论】：
是的，您必须创建自定义 HorizontalScroll 视图才能添加此功能。 这是一个很好的例子。但是稍微解释一下就会好很多 哦，我的...请不要这样实现您的布局。这里大约有 5 层嵌套视图地狱。 这个答案只是向您抛出一些代码，而不是制作一个易于理解的最小示例【参考方案2】：这是我的布局：
<HorizontalScrollView
android:id="@+id/horizontalScrollView1"
android:layout_
android:layout_
android:paddingTop="@dimen/padding" >
<LinearLayout
android:id="@+id/shapeLayout"
android:layout_
android:layout_
android:layout_marginTop="10dp" >
</LinearLayout>
</HorizontalScrollView>
我用动态复选框在代码中填充它。
【讨论】：
【参考方案3】：您可以使用 HorizontalScrollView 来实现水平滚动。
代码
<HorizontalScrollView
android:id="@+id/hsv"
android:layout_
android:layout_
android:layout_weight="0"
android:fillViewport="true"
android:measureAllChildren="false"
android:scrollbars="none" >
<LinearLayout
android:id="@+id/innerLay"
android:layout_
android:layout_
android:gravity="center_vertical"
android:orientation="horizontal" >
</LinearLayout>
</HorizontalScrollView>
featured.xml：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_
android:layout_margin="4dp"
android:layout_
android:orientation="vertical" >
<RelativeLayout
android:layout_
android:layout_
>
<ProgressBar
android:layout_
android:layout_
android:id="@+id/progress"
android:layout_centerInParent="true"
/>
<ImageView
android:id="@+id/image"
android:layout_
android:layout_
android:background="#20000000"
/>
<TextView
android:id="@+id/textView1"
android:layout_
android:layout_
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:gravity="center"
android:textColor="#000000"
android:background="#ffffff"
android:text="Image Text" />
</RelativeLayout>
</LinearLayout>
Java 代码：
LayoutInflater inflater;
inflater=getLayoutInflater();
LinearLayout inLay=(LinearLayout) findViewById(R.id.innerLay);
for(int x=0;x<10;x++)
inLay.addView(getView(x));
View getView(final int x)
View rootView = inflater.inflate( R.layout.featured_item,null);
ImageView image = (ImageView) rootView.findViewById(R.id.image);
//Thease Two Line is sufficient my dear to implement lazyLoading
AQuery aq = new AQuery(rootView);
String url="http://farm6.static.flickr.com/5035/5802797131_a729dac808_s.jpg";
aq.id(image).progress(R.id.progress).image(url, true, true, 0, R.drawable.placeholder1);
image.setOnClickListener(new OnClickListener()
@Override
public void onClick(View arg0)
Toast.makeText(PhotoActivity.this, "Click Here Postion "+x,
Toast.LENGTH_LONG).show();
);
return rootView;
注意：要实现延迟加载，请使用此链接进行 AQUERY
https://code.google.com/p/android-query/wiki/ImageLoading
【讨论】：
【参考方案4】：Here 是一个很好的代码教程。请让我知道这对你有没有用！ This 也是一个很好的教程。
编辑
在This 示例中，您只需添加以下行：
gallery.setSelection(1);
将适配器设置为画廊对象后，即这一行：
gallery.setAdapter(new ImageAdapter(this));
更新1
好的，我有你的问题。这个open source library 是您的解决方案。我也将它用于我的一个项目。希望这能最终解决您的问题。
更新 2：
我建议你通过这个tutorial。你可能会明白。我想我遇到了你的问题，你想要 带快照的水平滚动视图。尝试在 google 或此处使用该关键字搜索，您可能会得到解决方案。
【讨论】：
最初第一张图片显示在中间，第一张图片左侧保持空白，我不需要，第一个或最后一个位置不应该有空白，所以这没有帮助对我来说 你试过哪个例子？ 但是当我们选择第一张图片后，它位于中心，左侧为空白，我根本不想要空白，如 HorizontalScrollview，如果我们向任何方向滚动，空白将永远不会显示跨度> 请检查我回答中的更新部分。这正是您所需要的。 DevsmartLib-Android 有什么问题？你能说得更具体点吗？【参考方案5】：我用Horizontal Variable ListView 实现了类似的东西 唯一的缺点是，它仅适用于 Android 2.3 及更高版本。
使用这个库就像实现一个带有相应适配器的 ListView 一样简单。该库还提供了example
【讨论】：
【参考方案6】：我已经在 ListView 的每一行中创建了一个水平 ListView 如果你想要单个 您可以执行以下操作
这里我只是创建 horizontalListView 的视频缩略图 像这样
想法就是在HorizontalscrollView
中不断地将ImageView添加到LinearLayout的子元素中注意：记得在下次加载之前触发 .removeAllViews(); 否则会添加重复的子节点
Cursor mImageCursor = db.getPlaylistVideoImage(playlistId);
mVideosThumbs.removeAllViews();
if (mImageCursor != null && mImageCursor.getCount() > 0)
for (int index = 0; index < mImageCursor.getCount(); index++)
mImageCursor.moveToPosition(index);
ImageView iv = (ImageView) imageViewInfalter.inflate(
R.layout.image_view, null);
name = mImageCursor.getString(mImageCursor
.getColumnIndex("LogoDefaultName"));
logoFile = new File(MyApplication.LOCAL_LOGO_PATH, name);
if (logoFile.exists())
Uri uri = Uri.fromFile(logoFile);
iv.setImageURI(uri);
iv.setScaleType(ScaleType.FIT_XY);
mVideosThumbs.addView(iv);
mImageCursor.close();
mImageCursor = null;
else
ImageView iv = (ImageView) imageViewInfalter.inflate(
R.layout.image_view, null);
String name = "";
File logoFile;
name = mImageCursor.getString(mImageCursor
.getColumnIndex("LogoMediumName"));
logoFile = new File(MyApplication.LOCAL_LOGO_PATH, name);
if (logoFile.exists())
Uri uri = Uri.fromFile(logoFile);
iv.setImageURI(uri);
HorizontalListView 我的 xml
<HorizontalScrollView
android:id="@+id/horizontalScrollView"
android:layout_
android:layout_
android:layout_alignParentLeft="true"
android:layout_below="@+id/linearLayoutTitle"
android:background="@drawable/shelf"
android:paddingBottom="@dimen/Playlist_TopBottom_margin"
android:paddingLeft="@dimen/playlist_RightLeft_margin"
android:paddingRight="@dimen/playlist_RightLeft_margin"
android:paddingTop="@dimen/Playlist_TopBottom_margin" >
<LinearLayout
android:id="@+id/linearLayoutVideos"
android:layout_
android:layout_
android:gravity="left|center_vertical"
android:orientation="horizontal" >
</LinearLayout>
</HorizontalScrollView>
还有我作为每个孩子的图像视图
<?xml version="1.0" encoding="utf-8"?>
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/imageViewThumb"
android:layout_
android:layout_
android:layout_gravity="center"
android:layout_marginRight="20dp"
android:adjustViewBounds="true"
android:background="@android:color/transparent"
android:contentDescription="@string/action_settings"
android:cropToPadding="true"
android:maxHeight="200dp"
android:maxWidth="240dp"
android:padding="@dimen/playlist_image_padding"
android:scaleType="centerCrop"
android:src="@drawable/loading" />
要了解更多信息，您可以点击以下链接，其中包含一些简单的示例
-
http://www.dev-smart.com/?p=34
Horizontal ListView in Android?
【讨论】：
以上是关于如何像 Gallery 一样实现 HorizontalScrollView？的主要内容，如果未能解决你的问题，请参考以下文章
HorizontalScrollView 以编程方式滚动而没有焦点