GalleryのようなHorizo​​ntalScrollViewを実装する方法は？

Question

ギャラリーのいくつかの機能でHorizontal ScrollViewを実装したい 

ギャラリーでは、スクロールがある程度の距離でペアで配置されます。つまり、画面に3つの画像が表示されている場合、最後の画像をクリックすると中央に配置されます。

前述のようにHorizontalSCrollViewをどのように実装しますか？

Answer 1

このコードを試してください：

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;
}
}

何か問題があれば教えてください...

Answer 2

私のレイアウトは次のとおりです。

    <HorizontalScrollView
        Android:id="@+id/horizontalScrollView1"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:paddingTop="@dimen/padding" >

       <LinearLayout
        Android:id="@+id/shapeLayout"
        Android:layout_width="fill_parent"
        Android:layout_height="wrap_content"
        Android:layout_marginTop="10dp" >
        </LinearLayout>
    </HorizontalScrollView>

そして、コードに動的チェックボックスを追加します。

Answer 3

ここ は、コードを使用した優れたチュートリアルです。うまくいくかどうか教えてください！ これ も良いチュートリアルです。

編集

This の例では、次の行を追加するだけです。

gallery.setSelection(1);

アダプターをギャラリーオブジェクトに設定すると、次の行になります。

gallery.setAdapter(new ImageAdapter(this));

PDATE1

わかりました、あなたの問題を得た。これは オープンソースライブラリ がソリューションです。私は自分のプロジェクトの1つにも使用しました。これが最終的にあなたの問題を解決することを願っています。

PDATE2：

これをお読みになることをお勧めします tutorial 。あなたはアイデアを得るかもしれません。私はあなたの問題を手に入れたと思う、あなたはsnap with withhorizo​​ntal scrollviewが欲しいと思う。 Googleでそのキーワードを使用して検索するか、こちらから検索してみてください。解決策が見つかるかもしれません。

Answer 4

Horizo​​ntal Variable ListView に似たものを実装しました。唯一の欠点は、Android 2.3以降でのみ動作することです。

このライブラリの使用は、対応するアダプタでListViewを実装するのと同じくらい簡単です。ライブラリは、 例 も提供します

Answer 5

ListViewのすべての行に水平ListViewを作成しました。

ここでは、このような動画のサムネイルのhorizo​​ntalListViewを作成しています。

アイデアは、Horizo​​ntalscrollViewのLinearLayoutの子にImageViewを継続的に追加するだけです。

注：起動することを忘れないでください。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);
            }
        }

Horizo​​ntalListViewの私のxml

<HorizontalScrollView
    Android:id="@+id/horizontalScrollView"
    Android:layout_width="fill_parent"
    Android:layout_height="wrap_content"
    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_width="wrap_content"
        Android:layout_height="wrap_content"
        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_width="wrap_content"
    Android:layout_height="wrap_content"
    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" />

さらに学ぶには、簡単なサンプルがある以下のリンクをたどることができます

1. http://www.dev-smart.com/?p=34
2. Androidの水平リストビュー？

Answer 6

Horizo​​ntalScrollViewを使用して、水平スクロールを実装できます。

コード

<HorizontalScrollView
Android:id="@+id/hsv"
Android:layout_width="fill_parent"
Android:layout_height="100dp"
 Android:layout_weight="0"
Android:fillViewport="true"
Android:measureAllChildren="false"
Android:scrollbars="none" >
<LinearLayout
    Android:id="@+id/innerLay"
    Android:layout_width="wrap_content"
    Android:layout_height="100dp"
    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_width="160dp"
   Android:layout_margin="4dp"
Android:layout_height="match_parent"
Android:orientation="vertical" >

      <RelativeLayout 
Android:layout_width="fill_parent"
Android:layout_height="fill_parent" 
>

<ProgressBar                
    Android:layout_width="15dip"       
    Android:layout_height="15dip"
    Android:id="@+id/progress" 
    Android:layout_centerInParent="true"
    />

<ImageView
    Android:id="@+id/image"       
    Android:layout_width="fill_parent"       
    Android:layout_height="fill_parent"
    Android:background="#20000000"
    />

<TextView
    Android:id="@+id/textView1"
    Android:layout_width="fill_parent"
    Android:layout_height="30dp"
    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