2013-09-06 16 views
57

Chcę zaimplementować Horizontal ScrollView z niektórych cech Galerii enter image description hereJak zaimplementować HorizontalScrollView jako galerię?

W Galerii zwój wykonany w pewnej odległości to załatwić w parę, tj Jeśli mamy trzy obrazy pokazane na ekranie, klikając ostatni obraz będzie zorganizować w centrum miasta.

Jak zastosować HorizontalSCrollView jak wspomniano?

+0

http://stackoverflow.com/a/18075811/726863 –

+0

Czy możesz mi pomóc w tym [pytanie] (http://stackoverflow.com/questions/33219942/horitzontalscrollview-or-carrousel)? : D –

+0

@Sikizo: nie znalazłeś rozwiązania z 2. odpowiedzi na to pytanie? – Jayesh

Odpowiedz

81

Spróbuj kod:

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

Daj mi znać, jeśli w ogóle problem cieszyć ...

+0

Tak, aby dodać tę funkcję, musisz utworzyć niestandardowy widok HorizontalScroll. – Vijju

+0

To dobry przykład. Ale małe wyjaśnienie sprawiłoby, że jest o wiele lepiej –

2

Here to dobry samouczek z kodem. Daj mi znać, czy to działa dla Ciebie! This to także dobry samouczek.

EDIT

W This przykład, wszystko co musisz zrobić, to dodać ten wiersz:

gallery.setSelection(1); 

po ustawieniu adapter do galerii obiektu, to ta linia:

gallery.setAdapter(new ImageAdapter(this)); 

UPDATE1

W porządku, mam twój problem. Ten open source library jest twoim rozwiązaniem. Użyłem go również do jednego z moich projektów. Mam nadzieję, że to rozwiąże twój problem w końcu.

Update2:

Proponuję Ci przejść przez ten tutorial. Możesz dostać pomysł. Myślę, że mam twój problem, chcesz poziomy przewijany widok ze snapem. Spróbuj wyszukać za pomocą tego słowa kluczowego w google lub tutaj, możesz dostać swoje rozwiązanie.

+0

Na początku pierwsze zdjęcie jest wyświetlane w środku, a lewa strona pierwszego obrazu jest pusta, nie potrzebuję tego, nie powinno być puste na pierwszej lub ostatniej pozycji, Nie jest to dla mnie przydatne – Jayesh

+0

Który przykład Próbowałeś? –

+0

Próbowałem oba łącza na "Tutaj" i łącze na "To" również ... – Jayesh

0

Zaimplementowałem coś podobnego z Horizontal Variable ListView Jedyną wadą jest to, że działa tylko z systemem Android 2.3 lub nowszym.

Korzystanie z tej biblioteki jest tak proste, jak implementacja ListView z odpowiednim adapterem. Biblioteka udostępnia również example

0

Stworzyłem poziomą ListView w każdym rzędzie ListView jeśli chcesz pojedynczy można wykonać następujące czynności

Tutaj jestem tylko tworzenie horizontalListView z miniaturką filmy Ci się to

enter image description here

Pomysł jest po prostu stale dodać ImageView z dzieckiem LinearLayout w HorizontalscrollView

Uwaga: zapamiętać na ogień .removeAllViews(); przed następnym obciążenia czas innych mądrych doda duplikatu dziecka

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

Moje xml dla HorizontalListView

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

a także moje zdjęcie Zobacz jak każde dziecko

<?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" /> 

aby dowiedzieć się więcej można następujące linki, które mają kilka łatwych próbek

  1. http://www.dev-smart.com/?p=34
  2. Horizontal ListView in Android?
18

Oto mój plan:

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

I wypełnić go w kodzie z dynamicznych pól kontrolnych.

0

Można użyć HorizontalScrollView wdrożyć przewijania w poziomie. Kod

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

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

Uwaga: aby wdrożyć lazyloading skorzystaj z tego linku do AQUIERY

https://code.google.com/p/android-query/wiki/ImageLoading

Powiązane problemy