ایجاد جدول داینامیک با قابلیت صفحه بندی دراندروید

چهارشنبه 14 بهمن 1394

در این مقاله قصد داریم یک نمونه پروژه ی آماده یک جدول با اطلاعات که داینامیک هستند و قابلیت صفحه بندی را هم دارند برای شما نمایش دهیم، این نمونه سورس در محیط Android Studio نوشته شده است.

ایجاد جدول داینامیک با قابلیت صفحه بندی دراندروید

ابتدا داخل لایه ی activity از یک لایه استفاده کرده ایم داخل این لایه یک tablelayout تعریف کرده است، از یک tablerow برای تعریف جدول خود استفاده نمایید و داخل آن از textview برای نمایش اطلاعات استفاده می نماییم، در مرحله ی بعدی یک linearlayout دیگر می اندازید و دکمه و متن برای صفحه بندی را داخل آن تعریف می نماییم.

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/scrollView">

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">

        <TableLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/main" >

            <TableRow
                android:background="#ff00aa63"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:id="@+id/rowHeader">

                <TextView
                    android:text="ID"
                    android:layout_weight="1"
                    android:gravity="center_horizontal"
                    android:typeface="normal"
                    android:fontFamily="sans-serif-medium"
                    android:textColor="@android:color/background_light"
                    android:id="@+id/tvID"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content" />

                <TextView
                    android:text="Given Name"
                    android:layout_weight="1"
                    android:gravity="center_horizontal"
                    android:typeface="normal"
                    android:fontFamily="sans-serif-medium"
                    android:textColor="@android:color/background_light"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                     />

                <TextView
                    android:text="Middle Name"
                    android:layout_weight="1"
                    android:gravity="center_horizontal"
                    android:typeface="normal"
                    android:fontFamily="sans-serif-medium"
                    android:textColor="@android:color/background_light"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                     />

                <TextView
                    android:text="Surname"
                    android:layout_weight="1"
                    android:gravity="center_horizontal"
                    android:typeface="normal"
                    android:fontFamily="sans-serif-medium"
                    android:textColor="@android:color/background_light"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                     />
            </TableRow>

            <LinearLayout
                android:orientation="vertical"
                android:layout_width="fill_parent"
                android:background="@drawable/radius_middle"
                android:layout_height="2dp" />
        </TableLayout>

        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:background="#ff00aa63"
            >

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textAppearance="?android:attr/textAppearanceMedium"
                android:text="Page 1 of 50"
                android:id="@+id/txtPageCount"
                android:layout_marginLeft="20dp"
                android:layout_weight="1" />

            <Button
                style="?android:attr/buttonStyleSmall"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Prev"
                android:id="@+id/btnPrevious"
                android:layout_weight="1"
                android:layout_marginRight="2dp" />

            <Button
                style="?android:attr/buttonStyleSmall"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Next"
                android:id="@+id/btnNext"
                android:layout_weight="1"
                android:layout_marginLeft="2dp"
                android:layout_marginRight="10dp"/>
        </LinearLayout>

    </LinearLayout>
</ScrollView>

حالا تعریف کلاس ها است یک کلاس به نام person تعریف نمایید و با استفاده از get , set اطلاعات را می گیرد و نمایش می دهد.

public class Person {
    private Integer _id;
    private String _givenName;
    private String _middleName;
    private String _surName;

    public Person(Integer _id, String _givenName, String _middleName, String _surName) {
        this._id = _id;
        this._givenName = _givenName;
        this._middleName = _middleName;
        this._surName = _surName;
    }

    public Integer get_id() {
        return _id;
    }

    public void set_id(Integer _id) {
        this._id = _id;
    }

    public String get_givenName() {
        return _givenName;
    }

    public void set_givenName(String _givenName) {
        this._givenName = _givenName;
    }

    public String get_middleName() {
        return _middleName;
    }

    public void set_middleName(String _middleName) {
        this._middleName = _middleName;
    }

    public String get_surName() {
        return _surName;
    }

    public void set_surName(String _surName) {
        this._surName = _surName;
    }
}

کلاس بعدی کلاس برای صفحه بندی کردن صفحات جدول مان است که یک مقدار پیش فرض بگیرد و داخل این کلاس صفحه ی شروع و پایان و تعداد صفحات و max تعداد صفحات و ... نمایش می دهد.

public class Pageable<T> {
    /** the default page size */
    public static final int DEFAULT_PAGE_SIZE = 10;
    private static final int PAGE_WINDOW = 10;
    /** the list over which this class is paging */
    private List<T> list;
    /** the page size */
    private int pageSize = DEFAULT_PAGE_SIZE;
    /** the current page */
    private int page;
    /** the starting index */
    private int startingIndex;
    /** the ending index */
    private int endingIndex;
    /** the maximum number of pages */
    private int maxPages;
    /**
     * Creates a new instance with the specified list.
     *
     * @param list    a List
     */
    public Pageable(List<T> list) {
        this.list = list;
        this.page = 1;
        this.maxPages = 1;

        calculatePages();
    }
    private void calculatePages() {
        if (pageSize > 0) {
            // calculate how many pages there are
            if (list.size() % pageSize == 0) {
                maxPages = list.size() / pageSize;
            } else {
                maxPages = (list.size() / pageSize) + 1;
            }
        }
    }
    /**
     * Gets the list that this instance is paging over.
     *
     * @return  a List
     */
    public List<T> getList() {
        return this.list;
    }
    /**
     * Gets the subset of the list for the current page.
     *
     * @return  a List
     */
    public List<T> getListForPage() {
        return list.subList(startingIndex, endingIndex);
    }
    /**
     * Gets the page size.
     *
     * @return  the page size as an int
     */
    public int getPageSize() {
        return this.pageSize;
    }
    /**
     * Sets the page size.
     *
     * @param pageSize   the page size as an int
     */
    public void setPageSize(int pageSize) {
        this.pageSize = pageSize;
        calculatePages();
    }
    /**
     * Gets the page.
     *
     * @return  the page as an int
     */
    public int getPage() {
        return this.page;
    }
    /**
     * Sets the page size.
     *
     * @param p    the page as an int
     */
    public void setPage(int p) {
        if (p >= maxPages) {
            this.page = maxPages;
        } else if (p <= 1) {
            this.page = 1;
        } else {
            this.page = p;
        }
        // now work out where the sub-list should start and end
        startingIndex = pageSize * (page-1);
        if (startingIndex < 0) {
            startingIndex = 0;
        }
        endingIndex = startingIndex + pageSize;
        if (endingIndex > list.size()) {
            endingIndex = list.size();
        }
    }
    /**
     * Gets the maximum number of pages.
     *
     * @return  the maximum number of pages as an int
     */
    public int getMaxPages() {
        return this.maxPages;
    }
    /**
     * Determines whether there is a previous page and gets the page number.
     *
     * @return  the previous page number, or zero
     */
    public int getPreviousPage() {
        if (page > 1) {
            return page-1;
        } else {
            return 0;
        }
    }
    /**
     * Determines whether there is a next page and gets the page number.
     *
     * @return  the next page number, or 0
     */
    public int getNextPage() {
        if (page < maxPages) {
            return page+1;
        } else {
            return 0;
        }
    }
    /**
     * Gets the minimum page in the window.
     *
     * @return  the page number
     */
    public int getMinPageRange() {
        if (getPage() > PAGE_WINDOW) {
            return getPage() - PAGE_WINDOW;
        } else {
            return 1;
        }
    }
    /**
     * Gets the maximum page in the window.
     *
     * @return  the page number
     */
    public int getMaxPageRange() {
        if (getPage() < (getMaxPages() - PAGE_WINDOW)) {
            return getPage() + PAGE_WINDOW;
        } else {
            return getMaxPages();
        }
    }

}

در مرحله ی آخر تعریف ابزار های مورد استفاده و مشخص کردن id مورد نظر برای آن ها است، علاوه بر آن دکمه های استفاده شده در صفحه را تعریف می نماید و برای هر کدام رویداد مربوط به خودشان را می نویسید. و یک رویداد هم برای نمایش جدول استفاده می کند که هر کدام از مقادیری را که در کلاس person تعریف کرده است داخل textview مورد نظر قرار می دهد.

import android.content.res.Resources;
import android.graphics.Color;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Gravity;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.TableLayout;
import android.widget.TableRow;
import android.widget.TextView;
import java.util.ArrayList;
public class MainActivity extends ActionBarActivity {
    TableLayout maintable;
    TableRow tableRow,rowHead;
    LinearLayout separator;
    TextView value;
    TextView textView;
    Pageable<Person> pageableArray;
    Button buttonNext;
    Button buttonPrev;
    TextView textViewPageCount;
    ArrayList<Person> myValues;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        textView = (TextView) findViewById(R.id.tvID);
        maintable = (TableLayout) findViewById(R.id.main);
        rowHead = (TableRow) findViewById(R.id.rowHeader);
        buttonNext = (Button) findViewById(R.id.btnNext);
        buttonPrev = (Button) findViewById(R.id.btnPrevious);
        textViewPageCount = (TextView) findViewById(R.id.txtPageCount);
        myValues = new ArrayList<>();
        buttonNext.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                pageableArray.setPage(pageableArray.getNextPage());
                tableRow.removeAllViews();
                displayPage();
                textViewPageCount.setText("Page " + pageableArray.getPage() + " of " + pageableArray.getMaxPages());
            }
        });
        buttonPrev.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                pageableArray.setPage(pageableArray.getPreviousPage());
                tableRow.removeAllViews();
                displayPage();
                textViewPageCount.setText("Page " + pageableArray.getPage() + " of " + pageableArray.getMaxPages());

            }
        });
        for(int i=0; i<= 55; i++){
            myValues.add(new Person(i,"Sample" + i,"G","Sample" + i));
        }

        pageableArray = new Pageable<>(myValues);
        pageableArray.setPageSize(10);
        pageableArray.setPage(1);
        textViewPageCount.setText("Page " + pageableArray.getPage() + " of " + pageableArray.getMaxPages());
        displayPage();
    }
    public void displayPage() {
        maintable.removeAllViews();
        maintable.addView(rowHead);
        for (Person v : pageableArray.getListForPage()) {
            tableRow = new TableRow(this);
            tableRow.setLayoutParams(new TableLayout.LayoutParams(TableLayout.LayoutParams.WRAP_CONTENT, TableLayout.LayoutParams.WRAP_CONTENT));
            value = new TextView(this);
            value.setLayoutParams(textView.getLayoutParams());
            value.setGravity(Gravity.CENTER_HORIZONTAL);
            value.setText(String.valueOf(v.get_id()));
            tableRow.addView(value);
            value = new TextView(this);
            value.setLayoutParams(textView.getLayoutParams());
            value.setGravity(Gravity.CENTER_HORIZONTAL);
            value.setText(v.get_givenName());
            tableRow.addView(value);
            value = new TextView(this);
            value.setLayoutParams(textView.getLayoutParams());
            value.setGravity(Gravity.CENTER_HORIZONTAL);
            value.setText(v.get_middleName());
            tableRow.addView(value);
            value = new TextView(this);
            value.setLayoutParams(textView.getLayoutParams());
            value.setGravity(Gravity.CENTER_HORIZONTAL);
            value.setText(v.get_surName());
            tableRow.addView(value);
            maintable.addView(tableRow);
            addSeparator();
        }
    }
    private void addSeparator() {
        Resources res = MainActivity.this.getResources();
        separator = new LinearLayout(MainActivity.this);
        separator.setOrientation(LinearLayout.VERTICAL);
        separator.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, 2));
        separator.setBackgroundColor(Color.parseColor("#5e7974"));
        separator.setDividerDrawable(res.getDrawable(R.drawable.radius_middle));
        maintable.addView(separator);
    }
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.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();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }
        return super.onOptionsItemSelected(item);
    }
}

داخل کد بالا از یک منو هم استفاه شده است می توانید منو را داخل صفحه در صورت نیاز قرار دهید.

در نهایت خروجی به صورت زیر خواهد بود:

فایل های ضمیمه

برنامه نویسان

نویسنده 3355 مقاله در برنامه نویسان

کاربرانی که از نویسنده این مقاله تشکر کرده اند

در صورتی که در رابطه با این مقاله سوالی دارید، در تاپیک های انجمن مطرح کنید