ایجاد جدول داینامیک با قابلیت صفحه بندی دراندروید
چهارشنبه 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); } }
داخل کد بالا از یک منو هم استفاه شده است می توانید منو را داخل صفحه در صورت نیاز قرار دهید.
در نهایت خروجی به صورت زیر خواهد بود:
- Android
- 2k بازدید
- 5 تشکر