2014-01-08 185 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浮动。 –