2011-10-08 25 views
47

EDIT: Xem câu trả lời của riêng mình cho giải pháp dễ dàngAndroid - di chuyển theo chiều ngang của nhiều mặt hàng có thể xem

QUAN TRỌNG: Bounty được cung cấp cho cách rõ ràng để sửa đổi ViewPager để đáp ứng các kịch bản nêu dưới đây. Vui lòng không cung cấp HorizontalScrollView - Tôi cần toàn bộ kịch bản vòng đời Fragment được bao gồm

Tôi cần thực hiện cuộn ngang Fragments chế độ xem dựa trên đó một mục ở giữa và các mục bên phải/bên trái có thể nhìn thấy một phần hoặc toàn bộ. ViewPager không phù hợp với nhiệm vụ vì nó tập trung vào việc hiển thị một mục mỗi lần.

Để dễ hiểu hơn bên dưới là bản phác thảo nhanh trong đó các mục 1, 5 và 6 nằm ngoài khu vực có thể xem. Và và muốn làm cho số có thể xem được cấu hình này, ví dụ như trong chế độ xem dọc, tôi sẽ chỉ hiển thị 2 (hoặc có thể chỉ một) mục.

Tôi không cố gắng nói 3 mục trên màn hình, miễn là mục trung tâm được hiển thị những mục khác có thể bị cắt. Trên màn hình nhỏ là OK để có 1 mục trung tâm và khi màn hình tăng kích thước nhiều mục (cắt là OK) sẽ được hiển thị

Tôi hiểu rằng điều này trông giống như một thư viện nhưng lại không phải là hình ảnh đơn giản mà là Fragments danh sách có thể cuộn theo chiều dọc trong mỗi đoạn

PS Đã tìm thấy bài đăng trên blog này của @Commonsware rằng list 3 different approaches. Đối với nhu cầu của tôi, tôi thích # 3

enter image description here

+2

Liên kết này sẽ giúp bạn [HorizontalListView] (http://www.dev-smart.com/archives/34) – surendra

+0

tôi cần phải có cuộn ngang của mảnh vỡ với mỗi có một ListView dọc – Bostone

+0

Tôi có một nhu cầu rất giống nhau. Tôi đã sử dụng Thư viện cho đến khi nó bắt đầu rò rỉ các đối tượng trên khắp nơi một khi tôi đã thêm một ListView vào các khung nhìn mục gallery. Hiện đang suy nghĩ về việc sửa Gallery từ các đường nối đó dễ hơn là cố gắng sửa ViewPager. –

Trả lời

24

Điều này có câu trả lời dễ dàng đáng ngạc nhiên, tôi thậm chí không chắc chắn lý do tại sao nó không được đăng ngay lập tức. Tất cả những gì tôi cần làm để có được hiệu quả chính xác là ghi đè lên phương pháp PagerAdapter#getPageWidth. Theo mặc định nó trả về 1 nhưng nếu bạn đặt nó là 0.5, bạn sẽ nhận được 2 trang, 0.33 sẽ cho bạn 3, v.v. Tùy thuộc vào chiều rộng của dấu phân cách giữa các mục của máy nhắn tin bạn có thể phải giảm giá trị một chút.

Xem đoạn sau:

@Override 
    public float getPageWidth(final int position) { 
     // this will have 3 pages in a single view 
     return 0.32f; 
    } 
0

tôi có thể nghĩ đến hai cách để có thể thực hiện điều này.

  1. Bằng cách ViewSwitcher. Dưới đây là một số tuyệt vời YouTube video cho biết cách hoạt động của nó với một số onGestureListener. Tuy nhiên, tôi không chắc chắn nếu điều này sẽ làm việc với nhiều quan điểm như hình ảnh của bạn cho thấy.

  2. Thay vào đó, bạn có thể sử dụng HorizontalScrollView. Tuy nhiên, điều này thường gây ra vấn đề nếu bạn có một ScrollView bên trong của nhau, nhưng nó có thể có giá trị một shot!

Hãy cho tôi biết cách thực hiện, Chúc may mắn!

+0

Vui lòng đọc ghi chú tiền thưởng – Bostone

0

Ngoài câu trả lời thứ hai MrZander hãy nhìn vào điều này https://stackoverflow.com/a/2655740/935075

+0

Thậm chí không đóng. Tôi không cần "chụp địa điểm" hoặc phát hiện cử chỉ ngang. Tất cả những điều đó được thực hiện bởi ViewPager. Vui lòng đọc một lưu ý tiền thưởng – Bostone

0

Check out this blog post về cách viết một cái nhìn cuộn ngang tùy chỉnh để đạt được một cái gì đó tương tự. Ví dụ này chỉ có một màn hình hiển thị tại một thời điểm, nhưng bạn sẽ có thể dễ dàng sửa đổi màn hình cho nhu cầu của mình.

+0

Tôi đã triển khai dựa trên ViewPager thực hiện một màn hình tại thời điểm đó. Tôi đặc biệt gọi cho xem nhiều/một phần trong tiền thưởng – Bostone

+0

Quyền, mã trong ví dụ đó sẽ không làm chính xác những gì bạn muốn, nhưng đó là một nơi tuyệt vời để bắt đầu. Trong ví dụ, các khung nhìn bên trong có cùng độ rộng với khung nhìn bên ngoài (chế độ xem cuộn ngang), vì vậy một cách tự nhiên, chỉ một trong số chúng được hiển thị tại một thời điểm. Bạn có thể tinh chỉnh mã để chế độ xem bên trong của bạn hẹp hơn so với chế độ xem cuộn bên ngoài. Điều này sẽ cho phép nhiều hơn một trong số họ được hiển thị cùng một lúc.Nếu bạn làm điều này, bạn cũng sẽ cần phải tinh chỉnh giá trị "scrollTo" để chế độ xem ở giữa được căn giữa khi "snap" xuất hiện. – Joel

+0

Tôi đang xem xét việc thực hiện tương tự với ViewPager. Tôi không muốn đi tuyến đường HorizontalScrollView kể từ đó tôi sẽ thiếu rất nhiều chức năng liên quan đến Fragment của ViewPager – Bostone

2

Khi tôi đã viết một cái gì đó tương tự như mẫu. Trong ví dụ của tôi, tôi có thể cuộn bằng các nút lên xuống và nằm nghiêng. Bạn có thể sửa đổi nó một chút để đáp ứng yêu cầu của bạn.Trong ví dụ của tôi, tôi có 4 Lần được sắp xếp như thế này:


Nó trông như thế này. Trên bức tranh tôi di chuyển từ điểm 1 sang bên phải để xem 2:

Android View Scrolling

Mã này bao gồm xml này:

<?xml version="1.0" encoding="utf-8"?> 
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:orientation="vertical" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    > 
     <LinearLayout 
     android:layout_height="350sp" 
     android:layout_width="320sp"> 
     <LinearLayout 
      android:id="@+id/viewContainer" 
      android:background="#CCCCCC" 
      android:layout_width="640sp" 
      android:layout_height="700sp"> 
     </LinearLayout> 
    </LinearLayout> 
     <TableLayout 
      android:id="@+id/tableLayout" 
      android:layout_width="320sp" 
      android:layout_height="fill_parent" 
      android:stretchColumns="1" 
      android:gravity="bottom" 
      android:layout_alignParentBottom="true"> 
      <TableRow 
      android:background="#333333" 
      android:gravity="bottom">  
      <Button 
       android:id="@+id/btnUp" 
       android:layout_width="60sp" 
       android:layout_height="50sp" 
       android:text="Lift U" 
       /> 
      <Button 
       android:layout_width="60sp" 
       android:layout_height="50sp" 
       android:visibility="invisible" 
      /> 
      <Button 
       android:layout_width="60sp" 
       android:layout_height="50sp" 
       android:visibility="invisible" 
      /> 
      <Button 
       android:id="@+id/btnScreenUp" 
       android:layout_width="60sp" 
       android:layout_height="50sp" 
       android:layout_gravity="right" 
       android:text="Scrn U" 
       /> 
      </TableRow> 
      <TableRow 
       android:background="#444444" 
       android:layout_gravity="right"> 
       <Button 
       android:id="@+id/btnDown" 
       android:layout_width="60sp" 
       android:layout_height="50sp" 
       android:text="Lift D" 
       /> 
       <Button 
       android:id="@+id/btnEnter" 
       android:layout_width="60sp" 
       android:layout_height="50sp" 
       android:text="Enter" 
       /> 
       <Button 
       android:id="@+id/btnScreenLeft" 
       android:layout_width="60sp" 
       android:layout_height="50sp" 
       android:layout_gravity="right" 
       android:text="Scrn L" 
       /> 
       <Button 
       android:id="@+id/btnScreenDown" 
       android:layout_width="60sp" 
       android:layout_height="50sp" 
       android:layout_gravity="right" 
       android:text="Scrn D" 
       /> 
       <Button 
       android:id="@+id/btnScreenRight" 
       android:layout_width="60sp" 
       android:layout_height="50sp" 
       android:layout_gravity="right" 
       android:text="Scrn R" 
       /> 
      </TableRow> 
    </TableLayout> 
</FrameLayout> 

và mã Java này:

import android.app.Activity; 
import android.os.Bundle; 
import android.util.DisplayMetrics; 
import android.view.Gravity; 
import android.view.View; 
import android.view.View.OnClickListener; 
import android.view.Window; 
import android.widget.Button; 
import android.widget.LinearLayout; 
import android.widget.TextView; 

public class ViewSwitcherTest extends Activity { 

    private TextView view1, view2, view3, view4; 
    private Button btnUp, btnEnter, btnDown, btnScreenDown, btnScreenUp, btnScreenLeft, btnScreenRight; 
    private LinearLayout viewContainer; 
// private TableLayout tableLayout; 
    private LinearLayout.LayoutParams layoutParams; 
    private DisplayMetrics metrics = new DisplayMetrics(); 
    private int top = 0, left = 0; 
    private float density = 1.0f; 
// private ViewSwitcher switcher; 

    /** Called when the activity is first created. */ 
    @Override 
    public void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
     requestWindowFeature(Window.FEATURE_NO_TITLE); 
     getWindowManager().getDefaultDisplay().getMetrics(metrics); 
     density = metrics.density; 
     setContentView(R.layout.main); 
//  Buttons 
     btnEnter = (Button)findViewById(R.id.btnEnter); 
     btnUp = (Button)findViewById(R.id.btnUp); 
     btnDown = (Button)findViewById(R.id.btnDown); 
     btnScreenDown = (Button)findViewById(R.id.btnScreenDown); 
     btnScreenUp = (Button)findViewById(R.id.btnScreenUp); 
     btnScreenLeft = (Button)findViewById(R.id.btnScreenLeft); 
     btnScreenRight = (Button)findViewById(R.id.btnScreenRight); 
//  -------- 
//  tableLayout = (TableLayout)findViewById(R.id.tableLayout); 
     view1 = new TextView(this); 
     view1.setBackgroundResource(R.drawable.view1); 
     view1.setHeight((int)(350*density)); 
     view1.setWidth((int)(320*density)); 
     view1.setGravity(Gravity.CENTER_VERTICAL|Gravity.CENTER_HORIZONTAL); 
     layoutParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT); 
     layoutParams.setMargins(left, top, 0, 0); 
     viewContainer = (LinearLayout)findViewById(R.id.viewContainer); 
     viewContainer.addView(view1, layoutParams); 
     //Add 2nd view 
     view2 = new TextView(this); 
     view2.setBackgroundResource(R.drawable.view2); 
     view2.setHeight((int)(350*density)); 
     view2.setWidth((int)(320*density)); 
     view2.setGravity(Gravity.CENTER_VERTICAL|Gravity.CENTER_HORIZONTAL); 
     layoutParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT); 
     layoutParams.setMargins(left, top, 0, 0); 
     viewContainer.addView(view2, layoutParams); 
     //Add 3rd view 
     view3 = new TextView(this); 
     view3.setBackgroundResource(R.drawable.view3); 
     view3.setHeight((int)(350*density)); 
     view3.setWidth((int)(320*density)); 
     view3.setGravity(Gravity.CENTER_VERTICAL|Gravity.CENTER_HORIZONTAL); 
     top += 350*density; 
     left += 640*density*(-1); 
     layoutParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT); 
     layoutParams.setMargins(left, top, 0, 0); 
     viewContainer.addView(view3, layoutParams);  
     //add 4th view 
     view4 = new TextView(this); 
     view4.setBackgroundResource(R.drawable.view4); 
     view4.setHeight((int)(350*density)); 
     view4.setWidth((int)(320*density)); 
     view4.setGravity(Gravity.CENTER_VERTICAL|Gravity.CENTER_HORIZONTAL); 
     top += 0; 
     left += 640*density; 
     layoutParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT); 
     layoutParams.setMargins(left, top, 0, 0); 
     viewContainer.addView(view4, layoutParams);  
     btnEnter.setOnClickListener(new OnClickListener() { 
      @Override 
      public void onClick(View v) { 
       // Quit the application for now 
       finish(); 
      } 
     }); 
     btnScreenLeft.setOnClickListener(new OnClickListener() { 
      @Override 
      public void onClick(View v) { 
       viewContainer.scrollBy(-10,0); 
      } 
     }); 
     btnScreenRight.setOnClickListener(new OnClickListener() { 
      @Override 
      public void onClick(View v) { 
       viewContainer.scrollBy(10,0); 
      } 
     }); 
     btnScreenUp.setOnClickListener(new OnClickListener() { 
      @Override 
      public void onClick(View v) { 
       viewContainer.scrollBy(0,-10); 
      } 
     }); 
     btnScreenDown.setOnClickListener(new OnClickListener() { 
      @Override 
      public void onClick(View v) { 
       viewContainer.scrollBy(0,10); 
      } 
     }); 
//  view1.setOnKeyListener(new OnKeyListener() {    
//   @Override 
//   public boolean onKey(View v, int keyCode, KeyEvent event) { 
//    if (keyCode == KeyEvent.KEYCODE_DPAD_DOWN) 
//     viewContainer.scrollBy(0,10); 
//    return true; 
//   } 
//  }); 
    } 
} 

Những con số lớn trên mỗi màn hình là hình nền màu đen với những con số được vẽ trên đó. (Tôi đã không đăng nó ở đây bởi vì bạn có thể sẽ sửa đổi mã anyway).

+0

Không, không thể đi tuyến đường này. Tôi có nhiều thiết lập phức tạp hơn khi tôi đang sử dụng ViewPager và FragmentStatePagerAdapter để quản lý vòng đời Fragments. Tại thời điểm này tôi khá nhiều ý tưởng về việc sửa đổi ViewPager và tìm kiếm một gợi ý mà một phần nào tôi cần phải sửa đổi/mở rộng – Bostone

0

Nếu bạn muốn mở rộng ViewPager, chỉ cần ghi đè phương thức vẽ và setOffscreenPageLimit (giới hạn int). Nhưng, tôi khuyên bạn nên sử dụng FragmentPageAdapter nếu các mảnh của bạn là loại phức tạp.

Bạn có thể kiểm tra mã nguồn here hoặc nếu bạn muốn kiểm tra một trong các gói hỗ trợ bạn có thể làm điều đó here.

+0

Tôi đang sử dụng FragmentStatePagerAdapter nhưng điều đó sẽ chăm sóc một mảnh duy nhất và tôi cần phải cơ cấu lại cách danh sách được định vị trên màn hình với nhiều Phân đoạn trong chế độ xem. Tôi biết mã nguồn, nhờ – Bostone

+0

Nếu các mảnh rời khỏi phần chính không cần phải hoạt động, chỉ cần thu nhỏ phần trung tâm bằng một thu phóng và thêm một hình ảnh ở hai bên đại diện cho thành phần/đoạn. Làm cho hình ảnh một lần, sau đó vẽ chúng khi bạn cuộn qua vùng đó. –

+0

. Đặc biệt nếu bạn đang ở trong máy tính bảng và các mảnh bên có thể nhìn thấy hoàn toàn – Bostone

1

Chúng tôi đang làm một cái gì đó khá nhiều giống hệt như bạn đang mô tả cách sử dụng một Gallery với Fragments, và một bộ chuyển đổi bộ sưu tập mở rộng BaseAdapter. Tôi sẽ khuyên bạn nên đi với một bộ sưu tập để đạt được mục tiêu của bạn (chúng tôi cũng sử dụng ViewPager cho chế độ xem nơi chúng tôi không cần xem các đoạn khác).

Các vấn đề liên quan