قالب و افزونه وردپرس

SwipeRefreshLayout در اندروید

منتشرشده توسط حامد قنبری در تاریخ

کتابخانه اندروید شامل یک طرح جالب و غیر منتظره ای بنام : SwipeRefresLayout است. این یک روش استاندارد برای پیاده سازی الگوی  به روز رسانی در آندروید است.
با استفاده از این طرح جدید به راحتی می توان به اقتضائات مربوط به بروزرسانی صفحه پاسخ داد  ، روشی که در چند ثانیه می توان آن را انجام داد.


طرح بروزرسانی  با  کشیدن  لمسی ممتد  ViewGroup  ها در یک صفحه ظاهر می شود که اساساً صفحه مورد نظر را دوباره بارگذاری می کند. این روش طرحی است که رویدادهای لمسی را مدیریت می کند و هنگامی که کاربر به پایین حرکت می کند، انیمیشن پیشرفت نامعلومی زیر نوار تولبار نشان داده می شود. این اثر شبیه همان چیزی است که در برنامه Google Now دیده می شود.

در این مثال قصد داریم فرایند تازه سازی با SwipeRefreshLayout  را  در یک Webview  نشان دهیم.

اگر در داخل برنامه اکلیپس یا اندروید استودیو قرار دارید پروژه جدیدی را  ایجاد کنید

اکلیپس :File ⇒ New Android ⇒ Application Project

اندروید استودیو :File ⇒ New  ⇒ New Project

اما اگر هنوز برنامه خود را باز نکرده اید یکی از برنامه های فوق را باز نموده و بعد از تعیین مشخصات(نامگذاری) ، تعیین حداقل sdk  و نوع اکتیویتی (blank  یا Empty) ، نام اکتیویتی ابتدایی و اصلی خود  را همان MainActivity قرار دهید. بعد از لود کامل برنامه ، در مسیر res ⇒layout لایه متناظر اکتیوتی اصلی یعنی activity_main را پیدا نمود و کدهای مندرج و پیش فرض آن را پاک کرده و کدهای xml  زیر را به آن اضافه کنید:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context=".MainActivity"
    tools:showIn="@layout/activity_main">

    <android.support.v4.widget.SwipeRefreshLayout
        android:id="@+id/swipe"
        android:layout_width="match_parent"
        android:layout_marginTop="54dp"
        android:layout_height="match_parent">

        <WebView
            android:id="@+id/webView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentLeft="true"
            android:layout_alignParentRight="true"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            />
    </android.support.v4.widget.SwipeRefreshLayout>

  
</RelativeLayout>

لایوت فوق شامل یک عنصر SwipeRefreshLayout، یک WebView   است که قرار است آدرسی url  ورودی ما را نمایش دهد.

بعد از تعیین عناصر لایوت xml  در کلاس مربوط به اکتیویتی یا همان MainActivity ابتدا عناصر موجود را بر اساس id تعریف می کنیم :

 

webView = (WebView) findViewById(R.id.webView);
swipeRefreshLayout = (SwipeRefreshLayout) findViewById(R.id.swipe);

آدرس مورد نظر خود را برای وب ویو تعریف می کنیم .

webView.loadUrl(Address);

SwipeRefreshLayout  را بر اساس نوع listner  خود چنین تعریف می کنیم

swipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
    @Override
    public void onRefresh() {
        webView.loadUrl(currentUrl);
    }
});

با گسترش کلاس  MyWebViewClient به  نوع WebViewClient در قسمت مربوط به متد onPageFinished که مربوط به مرحله پایانی لود وب ویو است حالت refresh  عنصر مذکور را به حالت false  برمی گردانیم به شکل زیر:

public class MyWebViewClient extends WebViewClient{

    @Override
    public void onPageFinished(WebView view, String url) {
        swipeRefreshLayout.setRefreshing(false);
        currentUrl = url;
        super.onPageFinished(view, url);
    }
}

در نهایت کدهای مربوط به  کلاس اصلی ، یا همان Main activity  به شکل زیر خواهد بود:

package com.psrd.example.testapp;

import android.os.Bundle;
import android.support.v4.widget.SwipeRefreshLayout;
import android.support.v7.app.AppCompatActivity;
import android.webkit.WebView;
import android.webkit.WebViewClient;


public class MainActivity extends AppCompatActivity {

    WebView webView;
    SwipeRefreshLayout swipeRefreshLayout;
    String currentUrl = "https://google.com";

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

        webView = (WebView) findViewById(R.id.webView);
        swipeRefreshLayout = (SwipeRefreshLayout) findViewById(R.id.swipe);

        webView.loadUrl(currentUrl);
        webView.setWebViewClient(new MyWebViewClient());

        swipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
            @Override
            public void onRefresh() {
                webView.loadUrl(currentUrl);
            }
        });


    }

    public class MyWebViewClient extends WebViewClient{

        @Override
        public void onPageFinished(WebView view, String url) {
            swipeRefreshLayout.setRefreshing(false);
            currentUrl = url;
            super.onPageFinished(view, url);
        }
    }
}

حال با افزودن مجوز اینترنت در فایل AndroidManefest.xml  به برنامه مجوز  دسترسی به اینترنت را  تعریف می کنیم(که با رنگ قرمز نشان داده شده است).

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.psrd.example.testapp" >
    <uses-permission android:name="android.permission.INTERNET"></uses-permission>
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE">
    </uses-permission>

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme" >
        <activity android:name=".MainActivity" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

حال برنامه را اجرا کرده ومی توانید نتیجه کار خود را ببینید.



0 دیدگاه

دیدگاهتان را بنویسید

Avatar placeholder

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *