版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
【移動(dòng)應(yīng)用開(kāi)發(fā)技術(shù)】Android如何實(shí)現(xiàn)仿京東手機(jī)端類(lèi)別頁(yè)
這篇文章主要介紹Android如何實(shí)現(xiàn)仿京東手機(jī)端類(lèi)別頁(yè)，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！京東手機(jī)端的類(lèi)別標(biāo)簽頁(yè),是一個(gè)左側(cè)滑動(dòng)可選擇類(lèi)別,右側(cè)一個(gè)類(lèi)別明細(xì)的列表聯(lián)動(dòng)頁(yè)面.當(dāng)用戶選擇左側(cè)選項(xiàng),可在右側(cè)顯示更多選項(xiàng)來(lái)選擇.實(shí)現(xiàn)方式也不少.最常見(jiàn)的當(dāng)然是左側(cè)和右側(cè)各一個(gè)Fragment,左側(cè)Fragment放置ListView,右側(cè)放顯示類(lèi)別明細(xì)的Fragment.如果覺(jué)得頁(yè)面包含的Fragment太多,左側(cè)直接給一個(gè)ListView就可以了.不影響效果.效果圖:例子中值得注意的三點(diǎn):左側(cè)列表點(diǎn)擊某個(gè)Item可以自動(dòng)上下滑動(dòng),使所點(diǎn)擊的item自動(dòng)移至列表中間點(diǎn)擊item后保留背景色不變右側(cè)布局針對(duì)上面三個(gè)點(diǎn),這里采取如下的解決方法:計(jì)算可見(jiàn)列表的可見(jiàn)首項(xiàng)或末項(xiàng)position值,使用smoothScrollToPosition()方法實(shí)現(xiàn)滑動(dòng)自定義列表selector按下和松開(kāi)的背景色,在adapter去更新并控制item的背景色右側(cè)布局,采用Fragment是最好的.里面使用ScrollView裝載所有數(shù)據(jù),可以動(dòng)態(tài)的addView(),removeView(),網(wǎng)格布局使用GridView.由于Fragment,所以更新數(shù)據(jù)和更新View都非常方便,所以例子中直接用靜態(tài)頁(yè)面模擬數(shù)據(jù)了.重在通過(guò)簡(jiǎn)單的例子解釋這種實(shí)現(xiàn)思路,當(dāng)然實(shí)現(xiàn)不是唯一的.然后,我們先來(lái)模擬右側(cè)的Fragment數(shù)據(jù),一看就懂的代碼:public
class
JDFragment
extends
Fragment{
String
TAG
=
"JDFragment";
private
View
rootView
=
null;
private
LinearLayout
llayout_main
=
null;
private
TextView
tv
=
null;
private
LinearLayout.LayoutParams
lp_gd
=
null;
private
LinearLayout.LayoutParams
lp_tv
=
null;
private
ArrayList<Category>
itemList
=
null;
private
GDAdapter
adapter
=
null;
@Override
public
void
onAttach(Activity
activity)
{
Log.e(TAG,
"onAttach...");
super.onAttach(activity);
}
@Override
public
void
onCreate(Bundle
savedInstanceState)
{
Log.e(TAG,
"onCreate...");
super.onCreate(savedInstanceState);
}
@Override
public
View
onCreateView(LayoutInflater
inflater,
ViewGroup
container,
Bundle
savedInstanceState)
{
Log.e(TAG,
"onCreateView...");
rootView
=
inflater.inflate(R.layout.jd_frg_main,
null);
llayout_main
=
(LinearLayout)
rootView.findViewById(R.id.llayout_jd_frg_main);
tv
=
(TextView)
rootView.findViewById(R.id.tv_jd_frg_main);
updateTitle();
//模擬數(shù)據(jù)
for(int
i=0;
i<2;
i++)
{
setData();
}
return
rootView;
}
protected
void
updateTitle()
{
if(getArguments()
!=
null)
{
updateTitle(getArguments().getString("name"));
}
}
protected
void
updateTitle(String
title)
{
if(tv
!=
null)
{
tv.setText(title);
}
}
private
void
setData()
{
if(itemList
==
null)
{
itemList
=
new
ArrayList<Category>();
for(int
i=1;
i<11;
i++)
{
itemList.add(new
Category("選項(xiàng)
"
+
i,
""+i));
}
}
//高度60dp+行距8dp
=
68dp
int
heightUnit
=
(int)TypedValue
.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
68,
getResources().getDisplayMetrics());
int
height;
//計(jì)算Gridview總高度
if(itemList.size()
%
3
==
0)
{
height
=
(itemList.size()/3
+
2)*heightUnit;
}
else{
height
=
(itemList.size()/3
+
1)*heightUnit;
}
if(lp_gd
==
null)
lp_gd
=
new
LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT,
height);
if(lp_tv
==
null)
lp_tv
=
new
LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT
,
(int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP
,
30,
getResources().getDisplayMetrics()));
TextView
tv_title
=
new
TextView(getActivity());
tv_title.setLayoutParams(lp_tv);
tv_title.setText("組一");
llayout_main.addView(tv_title);
GridView
gridView
=
new
GridView(getActivity());
gridView.setNumColumns(3);
gridView.setVerticalSpacing(8);
gridView.setLayoutParams(lp_gd);
adapter
=
new
GDAdapter(getActivity(),
itemList,R.drawable.cate);
gridView.setAdapter(adapter);
llayout_main.addView(gridView);
}
@Override
public
void
onActivityCreated(Bundle
savedInstanceState)
{
Log.e(TAG,
"onActivityCreated...");
super.onActivityCreated(savedInstanceState);
}
@Override
public
void
onStart()
{
Log.e(TAG,
"onStart...");
super.onStart();
}
@Override
public
void
onResume()
{
Log.e(TAG,
"onResume...");
super.onResume();
}
@Override
public
void
onPause()
{
Log.e(TAG,
"onPause...");
super.onPause();
}
@Override
public
void
onStop()
{
Log.e(TAG,
"onStop...");
super.onStop();
}
@Override
public
void
onDestroyView()
{
Log.e(TAG,
"onDestroyView...");
super.onDestroyView();
}
@Override
public
void
onDestroy()
{
Log.e(TAG,
"onDestroy...");
super.onDestroy();
}
@Override
public
void
onDetach()
{
Log.e(TAG,
"onDetach...");
super.onDetach();
}
static
class
GDAdapter
extends
BaseAdapter
{
Context
context;
List<Category>
results;
int
imageId;
ViewHolder
holder
=
null;
public
GDAdapter(Context
context,
List<Category>
results,int
imageId)
{
this.context
=
context;
this.results
=
results;
this.imageId
=
imageId;
}
@Override
public
int
getCount()
{
//
TODO
Auto-generated
method
stub
return
results.size();
}
@Override
public
Object
getItem(int
position)
{
//
TODO
Auto-generated
method
stub
return
results.get(position);
}
@Override
public
long
getItemId(int
position)
{
//
TODO
Auto-generated
method
stub
return
position;
}
@Override
public
View
getView(int
position,
View
convertView,
ViewGroup
parent)
{
Category
c
=
(Category)getItem(position);
if(convertView
==
null)
{
holder
=
new
ViewHolder();
convertView
=
LayoutInflater.from(context).inflate(R.layout.jd_item,
null);
holder.tv
=
(TextView)
convertView.findViewById(R.id.tv_jd_item);
holder.imv
=
(ImageView)
convertView.findViewById(R.id.imv_jd_item);
}
else
{
holder
=
(ViewHolder)
convertView.getTag();
}
convertView.setTag(holder);
holder.tv.setText(c.getName());
holder.imv.setImageResource(imageId);
return
convertView;
}
class
ViewHolder
{
TextView
tv;
ImageView
imv;
}
}
}JDFragment的布局文件,jd_frg_main.xml:<?xml
version="1.0"
encoding="utf-8"
?>
<RelativeLayout
xmlns:android="/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFF"
>
<TextView
android:id="@+id/tv_jd_frg_main"
android:layout_width="match_parent"
android:layout_height="25dp"
android:text="Fragment"
android:textSize="16sp"
android:background="#EEEEEE"
/>
<ScrollView
android:id="@+id/scrlayout_jd_frg_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@+id/tv_jd_frg_main"
android:overScrollMode="never"
>
<LinearLayout
android:id="@+id/llayout_jd_frg_main"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
/>
</ScrollView>
</RelativeLayout>將所有數(shù)據(jù)放在ScrollView的線性布局中,使用Fragment作為容器,可以根據(jù)需要ADD,Remove和Update數(shù)據(jù)和View.到這里右側(cè)頁(yè)面的簡(jiǎn)單模擬實(shí)現(xiàn)就結(jié)束了,都是一目了然的代碼.然后就是實(shí)現(xiàn)左側(cè)列表了,先是列表中簡(jiǎn)單的自定義Adapter,MyAdapter:public
class
MyAdapter
extends
BaseAdapter
{
private
Context
context;
private
List<Category>
results;
private
int
imageId;
private
ViewHolder
holder
=
null;
private
int
selectedId;
public
MyAdapter(Context
context,
List<Category>
results,int
imageId)
{
this.context
=
context;
this.results
=
results;
this.imageId
=
imageId;
}
@Override
public
int
getCount()
{
//
TODO
Auto-generated
method
stub
return
results.size();
}
@Override
public
Object
getItem(int
position)
{
//
TODO
Auto-generated
method
stub
return
results.get(position);
}
@Override
public
long
getItemId(int
position)
{
//
TODO
Auto-generated
method
stub
return
position;
}
public
void
setSelected(int
position)
{
this.selectedId
=
position;
}
@Override
public
View
getView(int
position,
View
convertView,
ViewGroup
parent)
{
Category
c
=
(Category)getItem(position);
if(convertView
==
null)
{
holder
=
new
ViewHolder();
convertView
=
LayoutInflater.from(context).inflate(R.layout.jd_item,
null);
holder.tv
=
(TextView)
convertView.findViewById(R.id.tv_jd_item);
holder.imv
=
(ImageView)
convertView.findViewById(R.id.imv_jd_item);
}
else
{
holder
=
(ViewHolder)
convertView.getTag();
}
if(position
==
selectedId)
{
convertView.setBackgroundResource(R.drawable.sele_true);
}
else
{
convertView.setBackgroundResource(R.drawable.sele_false);
}
holder.tv.setText(c.getName());
holder.imv.setImageResource(imageId);
convertView.setTag(holder);
return
convertView;
}
class
ViewHolder
{
TextView
tv;
ImageView
imv;
}
}然后是主Activity了,在里面對(duì)可見(jiàn)ListView的item位置進(jìn)行計(jì)算,并進(jìn)行滑動(dòng)處理.當(dāng)用戶點(diǎn)擊偏上的item,列表就往下滑動(dòng),加載頂部更多的item;當(dāng)用戶點(diǎn)擊偏下的item,列表就往上滑動(dòng),加載底部更多的item.同時(shí)我們自定義按下和松開(kāi)時(shí)的背景文件放在drawable,隨便一個(gè)shape就可以了.然后點(diǎn)擊某個(gè)item的position時(shí),在adapter中判斷是否目標(biāo)item,是就設(shè)置按下背景色-白色,否則就是正常的背景色-灰色./**
*
仿京東類(lèi)別頁(yè)
*
@author
AlexTam
*/
public
class
JDActivity
extends
FragmentActivity{
private
ListView
lv_main
=
null;
private
EditText
et_search
=
null;
private
ArrayList<Category>
itemList
=
new
ArrayList<Category>();
private
MyAdapter
adapter
=
null;
//可見(jiàn)列表項(xiàng)的數(shù)量
private
int
visibleCount
=
0;
//上次點(diǎn)擊的位置
private
int
lastPosition
=
0;
private
int
ce
=
0;
//實(shí)際列表是否超出屏幕
private
boolean
isOut
=
true;
private
JDFragment
fragment
=
null;
@Override
public
void
onCreate(Bundle
savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.jd_main);
init();
}
private
void
init()
{
lv_main
=
(ListView)
findViewById(R.id.lv_main);
et_search
=
(EditText)
findViewById(R.id.et_search);
for(int
i=1;
i<21;
i++)
{
itemList.add(new
Category("選項(xiàng)
"
+
i,
""+i));
}
adapter
=
new
MyAdapter(this,
itemList,R.drawable.ic_launcher);
lv_main.setAdapter(adapter);
lv_main.setOnItemClickListener(new
MyOnItemOnClick());
lv_main.setSelector(R.color.pink);
//模擬右側(cè)標(biāo)簽頁(yè)
fragment
=
new
JDFragment();
Bundle
bundle
=
new
Bundle();
bundle.putString("name",
"c1");
fragment.setArguments(bundle);
FragmentManager
fm
=
getSupportFragmentManager();
FragmentTransaction
ft
=
fm.beginTransaction();
ft.replace(R.id.flayout_main,
fragment,
"c0").commit();
adapter.setSelected(0);
adapter.notifyDataSetChanged();
}
private
class
MyOnItemOnClick
implements
OnItemClickListener
{
@Override
public
void
onItemClick(AdapterView<?>
parent,
View
view,
int
posi
溫馨提示
- 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 電視臺(tái)演員服務(wù)心得
- 廣告行業(yè)美工工作技能總結(jié)
- 酒店服務(wù)員工作總結(jié)
- 跨學(xué)科教學(xué)與合作學(xué)習(xí)方案計(jì)劃
- 行業(yè)新品介紹總結(jié)
- 化工行業(yè)原料使用技術(shù)培訓(xùn)總結(jié)
- 娛樂(lè)行業(yè)演藝表演培訓(xùn)總結(jié)
- 體育館服務(wù)員的工作總結(jié)
- 酒店行業(yè)的衛(wèi)生管理
- 《漁藥使用及安全》課件
- 二氧化碳可降解塑料生產(chǎn)項(xiàng)目建議書(shū)
- 化工裝置常用英語(yǔ)詞匯對(duì)照
- 幼兒園幼兒教育數(shù)學(xué)領(lǐng)域核心經(jīng)驗(yàn)
- 病例討論麻醉科PPT課件
- EBZ220A掘進(jìn)機(jī)幻燈片
- 集體跳繩賽規(guī)則
- 煤礦調(diào)度工作培訓(xùn)內(nèi)容
- 機(jī)械原理課程設(shè)計(jì)-旋轉(zhuǎn)型灌裝機(jī)運(yùn)動(dòng)方案設(shè)計(jì)
- 標(biāo)準(zhǔn)《大跨徑混凝土橋梁的試驗(yàn)方法》
- 1、食品安全與營(yíng)養(yǎng)健康自查制度(學(xué)校食堂)
- 四氯化硅的提純
評(píng)論
0/150
提交評(píng)論