2014-01-08 230 views
2

如何創建Android的UI這樣Android的佈局與滾動

enter image description here

01和02的佈局高度應該是色器件的高度的1/3。默認情況下,佈局應顯示黑色區域,向下滾動應顯示01和黑色佈局的2/3。

  1. 如果主視圖顯示01和黑布局和用戶向上滾動那麼就應該轉到主要佈局的2/3(黑色佈局)
+0

+1更多細節,因爲圖像總是勝過千言萬語,反正:你確定這個問題涉及碎片嗎? –

+0

可以請你發佈你的XML佈局嗎? –

+0

@Satyaki他問「如何創建」,所以他可能還沒有佈局。 – Mdlc

回答

0

Fin盟友我找到了解決辦法

import android.os.Bundle; 
import android.app.Activity; 
import android.util.DisplayMetrics; 
import android.util.Log; 
import android.view.GestureDetector; 
import android.view.GestureDetector.SimpleOnGestureListener; 
import android.view.MotionEvent; 
import android.widget.LinearLayout; 
import android.widget.ScrollView; 
import android.widget.Toast; 

public class ScrollLayoutActivity extends Activity { 

private static String TAG = ScrollLayoutActivity.class.getSimpleName(); 

private LinearLayout mTopLayout; 
private LinearLayout mMiddleLayout; 
private LinearLayout mBottomLayout; 

private ScrollView mScrollView; 

private boolean possitionTop; 
private boolean possitionMiddle = true; 

int mLayoutHeight; 
float mDeviceHeight; 

@Override 
protected void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 
    setContentView(R.layout.activity_scroll_layouts); 

    DisplayMetrics displayMetrics = new DisplayMetrics(); 
    getWindowManager().getDefaultDisplay().getMetrics(displayMetrics); 

    // final float height=displayMetrics.heightPixels/displayMetrics.xdpi; 

    // device height in pixels 
    mDeviceHeight = displayMetrics.heightPixels; 
    mLayoutHeight = (int) mDeviceHeight/3; 

    mScrollView = (ScrollView) findViewById(R.id.scrv); 

    mTopLayout = (LinearLayout) findViewById(R.id.top); 
    mMiddleLayout = (LinearLayout) findViewById(R.id.middle); 
    mBottomLayout = (LinearLayout) findViewById(R.id.bottom); 

    mTopLayout.setLayoutParams(new LinearLayout.LayoutParams(mTopLayout 
      .getLayoutParams().width, mLayoutHeight)); 
    mBottomLayout.setLayoutParams(new LinearLayout.LayoutParams(
      mBottomLayout.getLayoutParams().width, mLayoutHeight)); 
    mMiddleLayout.setLayoutParams(new LinearLayout.LayoutParams(
      mMiddleLayout.getLayoutParams().width, (int) mDeviceHeight)); 

    mScrollView.setHorizontalFadingEdgeEnabled(false); 
    mScrollView.setVerticalFadingEdgeEnabled(false); 
    mScrollView.post(new Runnable() { 
     public void run() { 
      mScrollView.scrollTo(0, mLayoutHeight); 
     } 
    }); 

    // findViewById(R.id.button).setOnClickListener(new 
    // View.OnClickListener() { 
    // 
    // @Override 
    // public void onClick(View v) { 
    // Toast.makeText(ScrollLayoutActivity.this, "height : " + 
    // mDeviceHeight, Toast.LENGTH_SHORT).show(); 
    // } 
    // }); 

    Toast.makeText(this, "Device Height : " + mDeviceHeight, 
      Toast.LENGTH_SHORT).show(); 

} 

public boolean dispatchTouchEvent(MotionEvent ev) { 
    return mGestureDetector.onTouchEvent(ev); 
} 

SimpleOnGestureListener simpleOnGestureListener = new SimpleOnGestureListener() { 
    @Override 
    public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, 
      float velocityY) { 
     String swipe = ""; 
     float sensitvity = 100; 

     if ((e1.getX() - e2.getX()) > sensitvity) { 
      swipe += "Swipe Left\n"; 
     } else if ((e2.getX() - e1.getX()) > sensitvity) { 
      swipe += "Swipe Right\n"; 
     } else { 
      swipe += "\n"; 
     } 

     if ((e1.getY() - e2.getY()) > sensitvity) { 
      swipe += "Swipe Up\n"; 
      if (!possitionMiddle && possitionTop) { 
       mScrollView.scrollBy(0, mLayoutHeight); 
       possitionTop = false; 
       possitionMiddle = true; 
      } else if (possitionMiddle && !possitionTop) { 
       mScrollView.fullScroll(ScrollView.FOCUS_DOWN); 
       possitionTop = false; 
       possitionMiddle = false; 
      } 
     } else if ((e2.getY() - e1.getY()) > sensitvity) { 
      swipe += "Swipe Down\n"; 
      if (possitionMiddle && !possitionTop) { 
       mScrollView.fullScroll(ScrollView.FOCUS_UP); 
       possitionTop = true; 
       possitionMiddle = false; 
      } 
      if (!possitionMiddle && !possitionTop) { 
       mScrollView 
         .scrollTo(mScrollView.getBottom(), mLayoutHeight); 
       possitionTop = false; 
       possitionMiddle = true; 
      } 
     } else { 
      swipe += "\n"; 
     } 
     Log.d(TAG, swipe); 
     return super.onFling(e1, e2, velocityX, velocityY); 
    } 

}; 

GestureDetector mGestureDetector = new GestureDetector(
     simpleOnGestureListener); 
} 

這裏是佈局

<?xml version="1.0" encoding="utf-8"?> 
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android" 
android:id="@+id/scrv" 
android:layout_width="match_parent" 
android:layout_height="fill_parent" 
android:fillViewport="true" 
android:scrollbars="none" > 

<LinearLayout 
    android:id="@+id/container2" 
    android:layout_width="match_parent" 
    android:layout_height="fill_parent" 
    android:background="#1E1E1E" 
    android:baselineAligned="false" 
    android:orientation="vertical" > 

    <LinearLayout 
     android:id="@+id/top" 
     android:layout_width="match_parent" 
     android:layout_height="100dp" 
     android:background="@android:color/black" 
     android:baselineAligned="false" 
     android:orientation="vertical" > 
    </LinearLayout> 

    <LinearLayout 
     android:id="@+id/middle" 
     android:layout_width="match_parent" 
     android:layout_height="100dp" 
     android:background="@android:color/white" 
     android:baselineAligned="false" 
     android:orientation="vertical" > 

     <Button 
      android:id="@+id/button" 
      style="?android:attr/buttonStyleSmall" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:text="Button" /> 
    </LinearLayout> 

    <LinearLayout 
     android:id="@+id/bottom" 
     android:layout_width="match_parent" 
     android:layout_height="200dp" 
     android:background="@android:color/darker_gray" 
     android:baselineAligned="false" 
     android:orientation="vertical" > 
    </LinearLayout> 
</LinearLayout> 

找到這裏Android ScrollView with GestureDetector

1

可以使用滾動視圖來完成這件事。

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android" 
android:layout_width="fill_parent" 
android:layout_height="fill_parent"> 
     <TableLayout 
     android:layout_width="fill_parent" 
     android:layout_height="fill_parent" 
     android:stretchColumns="1"> 
     <!-- everything you already have --> 
    </TableLayout> 
</ScrollView> 
0

您需要創建一個佈局,如果您滾動,與簡單的固定頁眉和頁腳不同,它將在必要時移開。如果身體的大小超過了可用空間,我們希望佈局爲這樣的表現

enter image description here

注意如何,現在屏幕的尺寸不足以顯示所有的 我們的內容,頁腳和標題不再被錨定,並且響應於滾動而不重疊身體。

那麼,我們如何到達那裏?我們使用LinearLayout的layout_weight行爲 來確保身體區域總是會擴展爲至少與頁眉和頁腳之間剩餘的夾層空間一樣長的 。 如果內容更短,它會展開,直到它到達頁腳的頂部 ;如果它更長,它會推下頁腳。

<?xml version="1.0" encoding="utf-8"?> 
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    android:fillViewport="true"> 

<LinearLayout 
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:orientation="vertical"> 

    <!-- HEADER --> 
    <LinearLayout 
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:orientation="vertical" 
    /> 

    <!-- BODY --> 
    <LinearLayout 
    android:layout_width="fill_parent" 
    android:layout_height="0dip" 
    android:layout_weight="1" 
    android:orientation="vertical" 
    /> 

    <!-- FOOTER --> 
    <LinearLayout 
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:orientation="vertical" 
    /> 
</LinearLayout> 
</ScrollView> 

此外,你想在ListView捕捉到上面的內容,你可以看看這個tutorail這裏: http://blog.velir.com/index.php/2010/11/17/android-snapping-horizontal-scroll/

來源:http://blogactivity.wordpress.com/2012/02/22/smart-headers-and-footers-in-scrollviews/
編輯:已更新爲粘貼就緒代碼&添加了有關貼緊信息的鏈接。

+0

請先看看上面的用戶界面 –

0

您可以通過使用獲得該設備的高度:

DisplayMetrics metrics=new DisplayMetrics(); 
getWindowManager().getDefaultDisplay().getMetrics(metrics); 

float height=metrics.heightPixels/metrics.xdpi; 

然後,將高度設置爲您的佈局(採取findViewById):

layout.setLayoutParams(new ViewGroup.LayoutParams(layout.getLayoutParams().width, (int)height/3)); 

在您的佈局XML文件中,對齊你的兩個佈局到父母的頂部和底部,在這種情況下應該是RelativeLayout:

android:layout_alignParentTop="true" 
android:layout_alignParentBottom="true" 
+0

Alexe你不能在setLayoutParams(),height/3浮動。 –