33
私の具体的な質問があるhttp://youtu.be/EJm7subFbQIAndroidでスティッキーセクションヘッダー（iOSなど）を作成するにはどうすればよいですか？私はこのような効果を達成するにはどうすればよい：：
バウンス効果が重要ではないが、しかし、私は、ヘッダーのための「スティッキー」効果を必要とします。私はどこから始めるのですか？私はAPI 8で実装できるものが必要です。
ありがとうございました。
A
答えて
42
この問題の解決策はいくつかあります。あなたが記述しているのはセクションヘッダーで、という固定番号のセクションヘッダーと呼ばれています。
+4
私がここにいるオプションを試した後、HeaderListViewが私のニーズに最も適しているように見え、他のものより互換性があります。ありがとう –
+0
私はgithub.ioでHeaderListViewにアクセスできません。ここにgithub.comへの直接リンクがあります：https://github.com/applidium/HeaderListView – Andy
+0
どちらが高速のスクロールをサポートしていますか？ –
1
私はTextViewのような特定のビューにandroid:tag ="sticky"を追加している私のレイアウト、そしてあなたのapp.gradleファイルに
compile 'se.emilsjolander:StickyScrollViewItems:1.1.0'
これを追加LinearLayoutではないedittextは、このようになります。また、データバインディングを使用し、無視します。 TextViewのため
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android">
<data>
<variable
name="temp"
type="com.lendingkart.prakhar.lendingkartdemo.databindingmodel.BusinessDetailFragmentModel" />
<variable
name="presenter"
type="com.lendingkart.prakhar.lendingkartdemo.presenters.BusinessDetailsPresenter" />
</data>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.lendingkart.prakhar.lendingkartdemo.customview.StickyScrollView
android:id="@+id/sticky_scroll"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- scroll view child goes here -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
card_view:cardCornerRadius="5dp"
card_view:cardUseCompatPadding="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
style="@style/group_view_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/businessdetailtitletextviewbackground"
android:padding="@dimen/activity_horizontal_margin"
android:tag="sticky"
android:text="@string/business_contact_detail" />
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="7dp">
<android.support.design.widget.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/comapnyLabel"
android:textSize="16sp" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp">
<android.support.design.widget.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/contactLabel"
android:textSize="16sp" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp">
<android.support.design.widget.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/emailLabel"
android:textSize="16sp" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp">
<android.support.design.widget.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/NumberOfEmployee"
android:textSize="16sp" />
</android.support.design.widget.TextInputLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
card_view:cardCornerRadius="5dp"
card_view:cardUseCompatPadding="true">
<TextView
style="@style/group_view_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/businessdetailtitletextviewbackground"
android:padding="@dimen/activity_horizontal_margin"
android:tag="sticky"
android:text="@string/nature_of_business" />
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
card_view:cardCornerRadius="5dp"
card_view:cardUseCompatPadding="true">
<TextView
style="@style/group_view_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/businessdetailtitletextviewbackground"
android:padding="@dimen/activity_horizontal_margin"
android:tag="sticky"
android:text="@string/taxation" />
</android.support.v7.widget.CardView>
</LinearLayout>
</com.lendingkart.prakhar.lendingkartdemo.customview.StickyScrollView>
</LinearLayout>
</layout>
スタイルグループは、この
<style name="group_view_text" parent="@android:style/TextAppearance.Medium">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:textColor">@color/edit_text_color</item>
<item name="android:textSize">16dp</item>
<item name="android:layout_centerVertical">true</item>
<item name="android:textStyle">bold</item>
</style>
を見て、TextViewのための背景には、このように書き：（描画可能/ businessdetailtitletextviewbackground @）
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="@color/edit_text_color" />
</shape>
</item>
<item android:bottom="2dp">
<shape android:shape="rectangle">
<solid android:color="@color/White" />
</shape>
</item>
</layer-list>
5
EDIT：持っていたいくつかの自由時間完全に動作する例のコードを追加する。それに応じて答えを編集しました。
サードパーティのコードを使用したくない場合（またはXamarinなどで直接使用できない場合）、手作業で簡単に行うことができます。 アイデアは、ヘッダーの別のListViewを使用することです。このリストビューには、ヘッダ項目のみが含まれています。ユーザーがスクロールすることはできません（setEnabled（false））が、メインリストのスクロールに基づいてコードからスクロールされます。つまり、headerListviewとmainListviewの2つのリストと、対応する2つのアダプタheaderAdapterとmainAdapterがあります。 headerAdapterはセクションビューのみを返し、mainAdapterは2つのビュータイプ（セクションとアイテム）をサポートします。メインリスト内の位置を取得し、セクションリスト内の対応する位置を返すメソッドが必要になります。
主な活動
public class MainActivity extends AppCompatActivity {
public static final int TYPE_SECTION = 0;
public static final int TYPE_ITEM = 1;
ListView mainListView;
ListView headerListView;
MainAdapter mainAdapter;
HeaderAdapter headerAdapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mainListView = (ListView)findViewById(R.id.list);
headerListView = (ListView)findViewById(R.id.header);
mainAdapter = new MainAdapter();
headerAdapter = new HeaderAdapter();
headerListView.setEnabled(false);
headerListView.setAdapter(headerAdapter);
mainListView.setAdapter(mainAdapter);
mainListView.setOnScrollListener(new AbsListView.OnScrollListener(){
@Override
public void onScrollStateChanged(AbsListView view, int scrollState){
}
@Override
public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
// this should return an index in the headers list, based one the index in the main list. The logic for this is highly dependent on your data.
int pos = mainAdapter.getSectionIndexForPosition(firstVisibleItem);
// this makes sure our headerListview shows the proper section (the one on the top of the mainListview)
headerListView.setSelection(pos);
// this makes sure that headerListview is scrolled exactly the same amount as the mainListview
if(mainAdapter.getItemViewType(firstVisibleItem + 1) == TYPE_SECTION){
headerListView.setSelectionFromTop(pos, mainListView.getChildAt(0).getTop());
}
}
});
}
public class MainAdapter extends BaseAdapter{
int count = 30;
@Override
public int getItemViewType(int position){
if((float)position/10 == (int)((float)position/10)){
return TYPE_SECTION;
}else{
return TYPE_ITEM;
}
}
@Override
public int getViewTypeCount(){ return 2; }
@Override
public int getCount() { return count - 1; }
@Override
public Object getItem(int position) { return null; }
@Override
public long getItemId(int position) { return position; }
public int getSectionIndexForPosition(int position){ return position/10; }
@Override
public View getView(int position, View convertView, ViewGroup parent) {
View v = getLayoutInflater().inflate(R.layout.item, parent, false);
position++;
if(getItemViewType(position) == TYPE_SECTION){
((TextView)v.findViewById(R.id.text)).setText("SECTION "+position);
}else{
((TextView)v.findViewById(R.id.text)).setText("Item "+position);
}
return v;
}
}
public class HeaderAdapter extends BaseAdapter{
int count = 5;
@Override
public int getCount() { return count; }
@Override
public Object getItem(int position) { return null; }
@Override
public long getItemId(int position) { return position; }
@Override
public View getView(int position, View convertView, ViewGroup parent) {
View v = getLayoutInflater().inflate(R.layout.item, parent, false);
((TextView)v.findViewById(R.id.text)).setText("SECTION "+position*10);
return v;
}
}
}
ここで注意すべき物事のカップル。最初のセクションをメインビューリストに表示することは望ましくありません。これは、ヘッダーにすでに表示されている重複を生成するためです。それを避けるために、あなたのmainAdapter.getCount中（）：
return actualCount - 1;
とあなたのgetViewメソッド（）メソッドの最初の行は、あなたのメインのリストには、すべてのセルをレンダリングされます。この方法で
position++;
であることを確認しますが、最初の1つ。
もう1つのことは、headerListviewの高さがリストアイテムの高さと一致していることを確認することです。この例では、高さは固定されていますが、項目の高さがdpの正確な値に設定されていないと、処理が複雑になることがあります。これを解決する方法については、この回答を参照してください：https://stackoverflow.com/a/41577017/291688
メインレイアウト
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin">
<ListView
android:id="@+id/header"
android:layout_width="match_parent"
android:layout_height="48dp"/>
<ListView
android:id="@+id/list"
android:layout_below="@+id/header"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</RelativeLayout>
項目/ヘッダーレイアウト
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="48dp">
<TextView
android:id="@+id/text"
android:gravity="center_vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</LinearLayout>
関連する問題
- 1. Androidでこのようなアンケートフォームを達成するにはどうすればよいでしょうか？
- 2. duo.google.comのようなスクロール効果を作成するにはどうすればよいですか？
- 3. Elasticsearchでこのクエリを作成するにはどうすればよいですか？このような
- 4. この特定のホバー効果を達成するにはどうすればよいですか？
- 5. このホバー効果を共有しないようにするにはどうすればよいですか？
- 6. AndroidウェブアプリでJQueryスライダーのような機能を作成するにはどうすればよいですか？
- 7. モバイルアプリでアコーディオンリストを達成するにはどうすればよいですか？
- 8. Androidでカスタムコンテナビューを作成するにはどうすればよいですか？
- 9. Androidでカスタムコントロールを作成するにはどうすればよいですか？
- 10. Androidでアンバウンドサービスを作成するにはどうすればよいですか？
- 11. AndroidでCanvasを作成するにはどうすればよいですか？
- 12. CSS3でこのようなスタイルを作成するにはどうすればよいですか？
- 13. このような状況でSQLクエリを作成するにはどうすればよいですか？
- 14. このようなyii2でURLを作成するにはどうすればよいですか？
- 15. Angular 2でこのようなリクエストを作成するにはどうすればよいですか？
- 16. このような状況でCSSスプライトを作成するにはどうすればよいですか？
- 17. MATLABでこのようなプロットを作成するにはどうすればよいですか？
- 18. vueコンポーネントで配列を作成するにはどうすればよいですか？このような
- 19. ウェブサービスアプリの作成にはどうすればよいですか？
- 20. Grails 3でセッションが作成されないようにするにはどうすればよいですか？
- 21. CronJobでログファイルを作成できないようにするにはどうすればよいですか？
- 22. ピアノアプリの作成にはどうすればよいですか？ ImageViewなど？
- 23. Androidスタジオ - カードビューを作成するにはどうすればよいですか？
- 24. Android - スライドショーを作成するにはどうすればよいですか？
- 25. 分散効果のような効果を作り出すにはどうすればいいですか？
- 26. このようなウェブサイトのメニューバーを作成するにはどうすればよいですか？
- 27. このような色付きのGoogleマップを作成するにはどうすればよいですか？
- 28. このJOINを作成するにはどうすればよいですか？
- 29. iOSでAndroidのgetViewByIdを達成するにはどうすればよいですか？
- 30. sqlalchemyがselectでトランザクションを作成しないようにするにはどうすればよいですか？
iOS用の任意の運を?? – CoDe