当使用SwipeRefreshLayout（页面下拉）时，如何在卡片（RecyclerView）和顶部之间创建空间 [英] How do I create space between cards (RecyclerView) and top when SwipeRefreshLayout is used (page pulled down)
问题描述
我已经使用了SwipeRefreshLayout，因此用户可以正式看到 RecyclerView 由于页面下拉手势而刷新（重新加载数据）。
但我想要发生的事情，比如 Facebook 或 WhatsApp ：当用户拉下来时页面在第一张卡片和窗口顶部之间出现间隙。当页面被释放时，这个差距会再次消失。
如何做到这一点，因为我无法弄清楚我是什么我失踪了。如果我做错了什么，或者我还应该添加其他东西;请让我知道
例如：
[img] http ：//i.stack.imgur.com/b74pJ.jpg [/ img]
到目前为止我的代码如下：
CardAdapter.java
< pre lang =java> public class CardAdapter extends RecyclerView.Adapter< CardAdapter.ViewHolder> {
public 列表< TTItem> posts = new ArrayList<>（）;
public void addItems（List< TTItem> items）{
posts.addAll（items）;
notifyDataSetChanged（）;
}
public void clear（）{
posts.clear（）;
notifyDataSetChanged（）;
}
@覆盖
public ViewHolder onCreateViewHolder （ViewGroup parent， int viewType）{
Context context = parent.getContext（）;
查看视图= View.inflate（context，R.layout.item_cardview，null）;
return new ViewHolder（view）;
}
@覆盖
public void onBindViewHolder（ViewHolder holder， int position）{
holder.mTextView.setText（posts.get（位置）.title伪）;
Picasso.with（holder.mImageView.getContext（））。load（posts.get（position）.images [ 0 ]）。into（holder。 mImageView）;
}
@覆盖
public int getItemCount（）{
return posts.size（）;
}
静态 类 ViewHolder extends RecyclerView.ViewHolder {
public TextView mTextView;
public ImageView mImageView;
public ViewHolder（查看视图）{
super （查看）;
mTextView =（TextView）view.findViewById（R.id.textview）;
mImageView =（ImageView）view.findViewById（R.id.imageView）;
}
}
}
MainActivity.java
public 类 MainActivity extends ActionBarActivity implements SwipeRefreshLayout.OnRefreshListener {
@ InjectView （R.id.mainView）
RecyclerView mRecyclerView;
@ InjectView （R.id.refreshContainer）
SwipeRefreshLayout refreshLayout;
private LinearLayoutManager mLayoutManager;
private CardAdapter mAdapter;
@覆盖
受保护 void onCreate（Bundle savedInstanceState）{
super .onCreate（savedInstanceState）;
setContentView（R.layout.activity_main）;
ButterKnife.inject（ this ）;
mRecyclerView.setHasFixedSize（true）;
refreshLayout.setOnRefreshListener（ this ）;
TypedValue tv = new TypedValue（）;
int actionBarHeight = 0 ;
if （getTheme（）。resolveAttribute（R.attr.actionBarSize，tv，true））{
actionBarHeight = TypedValue.complexToDimensionPixelSize（tv。 data，getResources（）。getDisplayMetrics（））;
}
refreshLayout.setProgressViewEndTarget（true，actionBarHeight）;
mAdapter = new CardAdapter（）;
mRecyclerView.setAdapter（mAdapter）;
// 使用线性布局管理器
mLayoutManager = new GridLayoutManager（ this ， 1 ）;
mRecyclerView.setLayoutManager（mLayoutManager）;
}
@覆盖
public boolean onCreateOptionsMenu（菜单菜单）{
// 给菜单充气;这会将项目添加到操作栏中。
return true;
}
@覆盖
public boolean onOptionsItemSelected（MenuItem item）{
// 处理操作栏项目点击这里。操作栏将
// 自动处理Home / Up按钮上的点击，
// 在AndroidManifest.xml中指定父活动。
return super .onOptionsItemSelected（item）;
}
@覆盖
public void onRefresh（）{
mAdapter.clear（）;
Handler handler = new Handler（）;
handler.postDelayed（ new Runnable（）{
public void run（）{
refreshLayout.setRefreshing（false）;
}
}， 2500 ）;
}
}
Activity_main.xml
< LinearLayout xmlns：android = http://schemas.android.com/apk/res/android
xmlns：tools = http://schemas.android.com/tools
android：layout_width = < span class =code-string> match_parent
xmlns：app = http： //schemas.android.com/apk/res-auto
android：layout_height = match_parent
android：orientation = vertical
tools：context = 。MainActivity>
< android.support.v4.widget.SwipeRefreshLayout
android：id = @ + id / refreshContainer
android：layout_width = match_parent
android：layout_height = match_parent>
< android.support.v7.widget.RecyclerView
android：id = @ + id / mainView
android：scrollbars = vertical
android：layout_width = match_parent
android：layout_height = match_parent />
< /android.support.v4.widget.SwipeRefreshLayout>
< / LinearLayout>
item_cardview.xml：
<？xml version = 1.0 encoding = utf-8？>
< android.support.v7.widget.CardView
xmlns：android = http： //schemas.android.com/apk/res/android
xmlns：card_view = http://schemas.android.com/apk/res-auto
android：layout_width = 200dp
android：layout_height = 200dp
android：padding = 10dp
card_view：cardCornerRadius = 2dp
card_view：contentPadding = 5dp
card_view：cardUseCompatPadding = true
>
< LinearLayout
android：layout_width = match_parent
android：layout_height = wrap_content
android：orientation = vertical>
< ImageView
android：id = @ + id / imageView
android：layout_width = match_parent
android：layout_height = 150dp
android：scaleType = centerCrop />
< TextView
android：id = @ + id / textview
android：layout_width = match_parent
android：layout_height = wrap_removed
android：textSize = 20sp
android：textStyle = 粗体
android：layout_gravity = center />
< / LinearLayout>
< /android.support.v7.widget.CardView>
这是一个名为SwipeRefreshLayout [ ^ ]
教程： http://www.tutecentral.com/android-pull-to-refresh/ [ ^ ]
您可以将该布局用作你的东西的容器。只是不要重写很多代码...
玩得开心！
I've utilised SwipeRefreshLayout so users can formally see the RecyclerView is refreshing (reloading data) as a result of the page pull down gesture.
But what I would like to happen is, like on Facebook or WhatsApp: When the user pulls down the page a gap appears between the first card and top of the window. This gap then disappears again when the page is released.
How do I do this, as I can't figure out what I'm missing. If I've done something wrong, or if there is something else I should add; please let me know
Examples:
[img]http://i.stack.imgur.com/b74pJ.jpg[/img]
My code so far is below:
CardAdapter.java
public class CardAdapter extends RecyclerView.Adapter<CardAdapter.ViewHolder> {
public List<TTItem> posts = new ArrayList<>();
public void addItems(List<TTItem> items) {
posts.addAll(items);
notifyDataSetChanged();
}
public void clear() {
posts.clear();
notifyDataSetChanged();
}
@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
Context context = parent.getContext();
View view = View.inflate(context, R.layout.item_cardview, null);
return new ViewHolder(view);
}
@Override
public void onBindViewHolder(ViewHolder holder, int position) {
holder.mTextView.setText(posts.get(position).title);
Picasso.with(holder.mImageView.getContext()).load(posts.get(position).images[0]).into(holder.mImageView);
}
@Override
public int getItemCount() {
return posts.size();
}
static class ViewHolder extends RecyclerView.ViewHolder {
public TextView mTextView;
public ImageView mImageView;
public ViewHolder(View view) {
super(view);
mTextView = (TextView) view.findViewById(R.id.textview);
mImageView = (ImageView) view.findViewById(R.id.imageView);
}
}
}
MainActivity.java
public class MainActivity extends ActionBarActivity implements SwipeRefreshLayout.OnRefreshListener {
@InjectView(R.id.mainView)
RecyclerView mRecyclerView;
@InjectView(R.id.refreshContainer)
SwipeRefreshLayout refreshLayout;
private LinearLayoutManager mLayoutManager;
private CardAdapter mAdapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ButterKnife.inject(this);
mRecyclerView.setHasFixedSize(true);
refreshLayout.setOnRefreshListener(this);
TypedValue tv = new TypedValue();
int actionBarHeight = 0;
if (getTheme().resolveAttribute(R.attr.actionBarSize, tv, true)) {
actionBarHeight = TypedValue.complexToDimensionPixelSize(tv.data, getResources().getDisplayMetrics());
}
refreshLayout.setProgressViewEndTarget(true, actionBarHeight);
mAdapter = new CardAdapter();
mRecyclerView.setAdapter(mAdapter);
// use a linear layout manager
mLayoutManager = new GridLayoutManager(this, 1);
mRecyclerView.setLayoutManager(mLayoutManager);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
return super.onOptionsItemSelected(item);
}
@Override
public void onRefresh() {
mAdapter.clear();
Handler handler = new Handler();
handler.postDelayed(new Runnable() {
public void run() {
refreshLayout.setRefreshing(false);
}
}, 2500);
}
}
Activity_main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<android.support.v4.widget.SwipeRefreshLayout
android:id="@+id/refreshContainer"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:id="@+id/mainView"
android:scrollbars="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.v4.widget.SwipeRefreshLayout>
</LinearLayout>
item_cardview.xml:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="200dp"
android:layout_height="200dp"
android:padding="10dp"
card_view:cardCornerRadius="2dp"
card_view:contentPadding= "5dp"
card_view:cardUseCompatPadding="true"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="@+id/imageView"
android:layout_width="match_parent"
android:layout_height="150dp"
android:scaleType="centerCrop"/>
<TextView
android:id="@+id/textview"
android:layout_width="match_parent"
android:layout_height="wrap_removed"
android:textSize="20sp"
android:textStyle="bold"
android:layout_gravity="center"/>
</LinearLayout>
</android.support.v7.widget.CardView>
That is a special Layout called SwipeRefreshLayout[^]
Tutorial: http://www.tutecentral.com/android-pull-to-refresh/[^]
You might be able to use that Layout as a container for your stuff. Just not to rewrite to much code...
Have Fun!
这篇关于当使用SwipeRefreshLayout（页面下拉）时，如何在卡片（RecyclerView）和顶部之间创建空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
