乐学成语之显示所有动物类成语的列表
一.现在我们要将数据库中所有的动物类成语显示在界面上,首先在layout下新建activity_animal.xml文件,主要添加了一个ListView控件。
<span style="font-size:10px;"><span style="font-size:14px;"><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/bg_animal"
android:orientation="vertical" >
<ListView
android:id="@+id/IvAnimalList"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layoutAnimation="@anim/anim_layout_listview"
android:listSelector="#00000000">
</ListView>
</LinearLayout></span></span>
然后为ListView的子项指定一个我们自定义的布局,在layout目录下新建animal_item.xml.在这个布局中,我们定义了一个TextView用于显示成语的名称,又定义了一个ImageButton用于显示收藏按钮。
<span style="font-size:10px;"><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp">
<TextView
android:id="@+id/tvName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:gravity="center"
android:text="助人为乐"
android:textAppearance="?android:attr/textAppearanceLarge" />
<ImageButton
android:id="@+id/btnSave"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@null"
android:layout_alignParentRight="true"
android:layout_alignTop="@+id/tvName"
android:src="@drawable/btnsave"/>
</RelativeLayout></span>
二.在应用的包下创建adapter包,在该包下创建一个自定义的适配器,这个适配器继承自ArrayAdapter,并将泛型指定为Animal类。新建类AnimalAdapter.
<span style="font-size:10px;"> public class AnimalAdapter extends ArrayAdapter<Animal>{
private int resourceld;
public AnimalAdapter(Context context, int resource,
List<Animal> objects) {
super(context, resource, objects);
resourceld=resource;
}
@Override
public View getView(int position,View convertView,ViewGroup parent){
View view;
ViewHolder viewHolder;
if(convertView==null){
view=LayoutInflater.from(getContext()).inflate(resourceld, null);
viewHolder=new ViewHolder();
viewHolder.tvName=(TextView)view.findViewById(R.id.tvName);</span><span style="font-size:10px;"> view.setTag(viewHolder);//将ViewHolder存储在view中
}else{
view=convertView;
viewHolder=(ViewHolder) view.getTag();//重新获取ViewHolder
}
viewHolder.tvName.setText(animal.getName());
return view;
}
class ViewHolder{
TextView tvName;
ImageButton btnSave;
}
}
</span></span>
三.在activity包下新建StudyAnimalActivity继承自Activity.
<span style="font-size:10px;"> public class StudyAnimalActivity extends Activity {
private List<Animal> animalList;
private AnimalDao animalDao;
private ListView lvAnimalList;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_animal);
initAnimals();
lvAnimalList = (ListView) findViewById(R.id.IvAnimalList);
AnimalAdapter animalAdapter = new AnimalAdapter(this,
R.layout.animal_item, animalList);
lvAnimalList.setAdapter(animalAdapter);
lvAnimalList.setOnItemClickListener(new OnItemClickListener() {
}
private void initAnimals() {
animalDao = AnimalDao.getInstance(this);
animalList = animalDao.getAllAnimals();
}
}
</span>
通过添加一个initAnimals()方法,用于初始化所有的动物数据。然后获取ListView控件,建立AnimalAdapter关联子布局及数据,调用ListView控件的setAdapter()方法与关联数据,这样定制ListView界面的任务就完成了。
四.修改StudyActivity中点击事件。
<span style="font-size:10px;"> ListView listView = (ListView) findViewById(R.id.lvCategories);
listView.setAdapter(adapter);
listView.setOnItemClickListener(new OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view,
int position, long id) {
switch (position) {
case 0:
Intent intent = new Intent(StudyActivity.this,
StudyAnimalActivity.class);
startActivity(intent);
break;
default:
break;
}
Category category = categoryList.get(position);
Toast.makeText(StudyActivity.this, category.getName(),
Toast.LENGTH_LONG).show();</span>
此时点击收藏按钮没有任何反应,现在一起来处理一下点击事件。修改AnimalAdapter类,加入事件处理。
<span style="font-size:10px;"> </span>
<span style="font-size:10px;"> public class AnimalAdapter extends ArrayAdapter<Animal>{
private int resourceld;
private Context context;
public AnimalAdapter(Context context, int resource,List<Animal> objects) {
super(context, resource, objects);
this.context=context;
resourceld=resource;
}
@Override
public View getView(int position,View convertView,ViewGroup parent){
final Animal animal=getItem(position);//获取当前项的animal实例
View view;
ViewHolder viewHolder;
if(convertView==null){
view=LayoutInflater.from(getContext()).inflate(resourceld, null);
viewHolder=new ViewHolder();
viewHolder.tvName=(TextView)view.findViewById(R.id.tvName);
viewHolder.btnSave=(ImageButton)view.findViewById(R.id.btnSave);
viewHolder.btnSave.setFocusable(false);
viewHolder.btnSave.setFocusableInTouchMode(false);
viewHolder.btnSave.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View view) {
Toast.makeText(context, "你要收藏吗"+animal.getName()+"吗",
Toast.LENGTH_SHORT).show();
}
});
view.setTag(viewHolder);//将ViewHolder存储在view中
}else{
view=convertView;
viewHolder=(ViewHolder) view.getTag();//重新获取ViewHolder
}
viewHolder.tvName.setText(animal.getName());
return view;
}
class ViewHolder{
TextView tvName;
ImageButton btnSave;
}
}</span>
修改后运行一下程序
点击一下收藏按钮,就会显示提示是否收藏当前的成语。通过这一阶段,显示所有动物列表的功能已经完成了。
五.显示每条成语的详细信息
现在我们要实现的是:点击每条成语以对话框的形式显示该成语的详细信息。首先在layout下新建布局文件dialog_info.xml
<span style="font-size:10px;"><span style="font-size:12px;"><ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/bg_ling"
android:orientation="vertical" >
<TextView
android:id="@+id/tvIdiomInfo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Medium Text"
android:textAppearance="?android:attr/textAppearanceMedium"/>
</LinearLayout>
</ScrollView></span></span>
现在可以看到,最外层的是Scrollview组件,当内容较多时会自动出现垂直滚动条。接下来修改StudentAnimalActivity,增加点击事件处理。
<span style="font-size:10px;"> lvAnimalList.setAdapter(animalAdapter);
lvAnimalList.setOnItemClickListener(new OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> adapterView, View view,
int position, long id) {
Animal animal = animalList.get(position);
String result = animal.getName() + "\n" + animal.getPronounce()
+ "\n【解释】:" + animal.getExplain() + "\n【近义词】:"
+ animal.getHomoionym() + "\n【反义词】:"
+ animal.getAntonym() + "\n【来源】:"
+ animal.getDerivation() + "\n【示例】:"
+ animal.getExamples();
DialogUtil.showDialog(result,StudyAnimalActivity.this);</span>
<span style="font-size:10px;"></span>
这里DialogUtil.showDialog()方法是自定义的办法。接着在util包下新建DialogUtil类
<span style="font-size:10px;">public class DialogUtil {
public static void showDialog(String result,Context context){
AlertDialog.Builder builder=new AlertDialog.Builder(context);
LayoutInflater layoutInflater=LayoutInflater.from(context);
View view=layoutInflater.inflate(R.layout.dialog_info, null);
builder.setView(view);
TextView tvIdiomInfo=(TextView) view.findViewById(R.id.tvIdiomInfo);
tvIdiomInfo.setText(result);
builder.setPositiveButton("确定", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
dialog.dismiss();
}
});
builder.create().show();
}
}
</span>
现在运行点击每个成语并不单出对话框,通过Google搜索发现是因为在列表项中如果出现类似于按钮这种能够获取焦点的组件时,就会出现无法点击每一列表项的情况。
解决的办法是,修改AnimlAdapter类,加入以下两句
<span style="font-size:10px;">viewHolder.btnSave.setFocusable(false);
viewHolder.btnSave.setFocusableInTouchMode(false);</span>
运行结果如下