SwipeRefreshLayout の使い方
-
21-12-2019 - |
質問
背景
Googleが最近公開した サポートライブラリのアップデート, に新しい「」が追加されました。スワイプ更新レイアウト" ビュー。
このビューでは、別のビューをラップできるほか、更新操作を実行するために下にスワイプすることもサポートされています。
スクリーンショット:
問題
Google はサンプルを提供していないので (少なくとも私が見つけることのできるものはまだありません)、私はそれを自分で使ってみました。
最初はスワイプするたびにクラッシュ (NPE) が発生していましたが、それは「OnRefreshListener」を提供しなかったためであることがわかりました。
でもカスタマイズはおろか使い方もまだわかりません
レイアウト ファイルの XML は次のとおりです。
<android.support.v4.widget.SwipeRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.swiperefreshlayouttest.MainActivity"
tools:ignore="MergeRootFrame" >
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="TTT"
android:textSize="40sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="TTT"
android:textSize="40sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="TTT"
android:textSize="40sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="TTT"
android:textSize="40sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="TTT"
android:textSize="40sp" />
</LinearLayout>
</ScrollView>
</android.support.v4.widget.SwipeRefreshLayout>
コードですが、特別なことは何もしていません。
public class MainActivity extends ActionBarActivity
{
@Override
protected void onCreate(final Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final SwipeRefreshLayout swipeRefreshLayout=(SwipeRefreshLayout)findViewById(R.id.container);
swipeRefreshLayout.setOnRefreshListener(new OnRefreshListener()
{
@Override
public void onRefresh()
{
// do nothing
}
});
}
}
質問
このビューの正しい使用方法は何ですか?
カスタマイズするにはどうすればよいですか?今のところ黒い線だけですが…
解決
それが何なのか分からない ActionBarActivity
拡張しているクラスはありますが、FragmentActivityを使用して正常に動作しました
public class ActivityMain extends FragmentActivity implements OnRefreshListener {
private SwipeRefreshLayout mSwipeRefreshLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
setContentView(R.layout.activity_main);
mSwipeRefreshLayout = (SwipeRefreshLayout) findViewById(R.id.container);
mSwipeRefreshLayout.setOnRefreshListener(this);
super.onCreate(savedInstanceState);
}
@Override
public void onRefresh() {
Toast.makeText(this, "Refresh", Toast.LENGTH_SHORT).show();
new Handler().postDelayed(new Runnable() {
@Override
public void run() {
mSwipeRefreshLayout.setRefreshing(false);
}
}, 2000);
}
}
XML レイアウトをそのままコピーして貼り付けました。
カスタマイズに関しては、 setColorScheme(int colorResId, int colorResId, int colorResId, int colorResId); を呼び出して色付きバーの色を変更する以外にできることはあまりありません。
例えば
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="blue">#0099CC</color>
<color name="purple">#9933CC</color>
<color name="green">#669900</color>
<color name="orange">#FF8800</color>
</resources>
mSwipeRefreshLayout.setColorScheme(R.color.blue, R.color.purple, R.color.green, R.color.orange);
それは本当に残念な追加です。リフレッシュ時の感度はかなり高く、それを変更する設定はありません
編集
この授業のときにこれを書きました(そして ActionBarActivity
class) が SDK に追加されたばかりでした。そのため、この回答を書いたときからいくつかのことが変わりました。さらに、使用するアクティビティの種類がこのソリューションに影響することはありません。
setColorScheme
現在は非推奨になっていますが、 setColorSchemeResources(int... colorResIds)
代わりに使用する必要があります。(カラー ID は好きなだけ入力できます)。
setDistanceToTriggerSync(int distance)
更新をトリガーするためにユーザーがどのくらい下にスワイプする必要があるかを設定するために使用することもできます。
をチェックすることをお勧めします 公式ドキュメント クラスが他に何を提供しているかを確認してください。
他のヒント
manactivity.java
public class MainActivity extends ActionBarActivity {
TextView textView;
private SwipeRefreshLayout mSwipeRefreshLayout;
static int count = 0;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
textView = (TextView) findViewById(R.id.scrollTextView);
// /You will setup the action bar with pull to refresh layout
mSwipeRefreshLayout = (SwipeRefreshLayout) findViewById(R.id.container);
mSwipeRefreshLayout.setColorScheme(R.color.blue,
R.color.green, R.color.orange, R.color.purple);
mSwipeRefreshLayout.setOnRefreshListener(new OnRefreshListener() {
@Override
public void onRefresh() {
Log.e(getClass().getSimpleName(), "refresh");
new GetLinks().execute();
}
});
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
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.
int id = item.getItemId();
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
public class GetLinks extends AsyncTask<Void, Void, Void> {
@Override
protected void onPreExecute() {
super.onPreExecute();
}
@Override
protected Void doInBackground(Void... params) {
try {
Thread.sleep(5000);
} catch (InterruptedException e) {
e.printStackTrace();
}
return null;
}
@Override
protected void onPostExecute(Void result) {
super.onPostExecute(result);
//Here you can update the view
textView.setText(textView.getText().toString()+"--New Content Added" + ++count);
// Notify swipeRefreshLayout that the refresh has finished
mSwipeRefreshLayout.setRefreshing(false);
}
}
}
.
activity_main.xml
<android.support.v4.widget.SwipeRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/scrollTextView"
android:text="TTT"
android:textSize="40sp" />
</ScrollView>
</android.support.v4.widget.SwipeRefreshLayout>
.
colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<item name="blue" type="color">#FF33B5E5</item>
<item name="purple" type="color">#FFAA66CC</item>
<item name="green" type="color">#FF99CC00</item>
<item name="orange" type="color">#FFFFBB33</item>
</resources>
. 例については、次のようにご覧ください。> http://developer.android.com/サンプル/スワイプレッシュLayOutBasic / Index.html
You can by simply following below method (I am using swipelayout on Expandable list ) Test.xml
<android.support.v4.widget.SwipeRefreshLayout
android:id="@+id/swipe2"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="@id/RelativeTop"
android:background="@drawable/listbg" >
<ExpandableListView
android:id="@+id/lvExp"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:cacheColorHint="@android:color/transparent"
android:groupIndicator="@null"
android:listSelector="@android:color/white" />
</android.support.v4.widget.SwipeRefreshLayout>
ListHeader.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@drawable/sectionbg"
android:orientation="horizontal"
android:padding="8dp" >
<ImageView
android:id="@+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:contentDescription="@string/contentdescription"
android:src="@drawable/expandbtn" />
<TextView
android:id="@+id/lblListHeader"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginLeft="3dp"
android:text="this is test"
android:textColor="@android:color/white"
android:textSize="17sp" />
ChildItem.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="55dp"
android:background="@color/GrayProductBackground" >
<TextView
android:id="@+id/lblListItem"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginLeft="35dp"
android:layout_marginRight="20dp"
android:gravity="center_vertical"
android:paddingBottom="5dp"
android:textColor="@color/GrayTextProduct"
android:textSize="17sp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignRight="@+id/lblListItem"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:contentDescription="@string/arrowdescription"
android:gravity="center"
android:src="@drawable/navigationarrow" />
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="1dp"
android:layout_alignParentBottom="true"
android:background="@android:color/white" >
</RelativeLayout>
colors used
<color name="pDarkGreen">#8ec549</color>
<color name="pDarskSlowGreen">#c1f57f</color>
<color name="pLightGreen">#f7ffed</color>
<color name="pFullLightGreen">#d6d4d4</color>
Mainactivity.java
swipeView = (SwipeRefreshLayout) findViewById(R.id.swipe2);
swipeView.setColorSchemeResources(R.color.pDarkGreen, R.color.Gray, R.color.Yellow, R.color.pFullLightGreen);
swipeView.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
@Override
public void onRefresh() {
swipeView.setRefreshing(false);
}
(new Handler()).postDelayed(new Runnable() {
@Override
public void run() {
Log.d("Swipe", "Refreshing Number");
}
}, 0);
}
});
You can set swipeView.setRefreshing(false);
to false or true according to your requirment
this swipeing mechanisam will work in android's all API level
SwipeRefreshLayout with Kotlin
Xml file code
<androidx.swiperefreshlayout.widget.SwipeRefreshLayout
android:layout_width="0dp"
android:layout_height="0dp" app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="90dp" app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="93dp" app:layout_constraintEnd_toEndOf="parent"
android:id="@+id/swipe_refresh_layout"
>
<androidx.recyclerview.widget.RecyclerView
android:layout_width="0dp"
android:layout_height="0dp" app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="90dp" app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="93dp" app:layout_constraintEnd_toEndOf="parent"
android:id="@+id/recyclerView"
/>
</androidx.swiperefreshlayout.widget.SwipeRefreshLayout>
Activity Code
Declare the following code above the oncreate method
var mSwipeRefreshLayout: SwipeRefreshLayout? = null
Declare the following code inside the oncreate method after setContentView line
mSwipeRefreshLayout= findViewById<SwipeRefreshLayout>(R.id.swipe_refresh_layout)
mSwipeRefreshLayout!!.setOnRefreshListener {
//API Calls
}
On success API Call or failure API calls
mSwipeRefreshLayout!!.isRefreshing = false
activity_main.xml
<android.support.v4.widget.SwipeRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/swipe_refresh_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
android:visibility="gone"/>
MainActivity.java
public class MainActivity extends AppCompatActivity
implements SwipeRefreshLayout.OnRefreshListener {
static ViewPager viewPager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
swipeRefreshLayout = (SwipeRefreshLayout) findViewById(R.id.swipe_refresh_layout);
viewPager = (ViewPager) findViewById(R.id.viewpager);
swipeRefreshLayout.setOnRefreshListener(this);
swipeRefreshLayout.post(new Runnable() {
@Override
public void run() {
swipeRefreshLayout.setRefreshing(true);
setupViewPager(viewPager);
}
}
);
}
private void setupViewPager(ViewPager viewPager) {
swipeRefreshLayout.setRefreshing(false);
}
}