好久没有更新博客了。
最近由于工作比较忙,再加上忙于社交。导致一直没好好静下来研究Android。
这次给大家分享“仿腾讯新闻内容列表界面”。其实,这段代码已经写了一阵时间了,只是很久没有传上来,这次借好不容易静下来的机会将其贴上来,分享其中一些技术。大家可以给出意见或建议,感谢。
此文只是初期对新闻客户端的布局设计。不管是前端UI还是后台设计,后续会一点一点丰富起来。
文中主要用到的技术:
1、ListView列表
2、各类不同列表项的布局
3、BaseAdapter继承类的应用
众所周知,腾讯新闻客户端主界面是这样的:
这次要防的是导航条下面的列表布局,仿后的效果图:
布局原理:可以将整个界面看做一个列表容器(ListView,程序中也确实如此),UI方面有多种布局,每一哥条目不同则布局不同(目前定义了4种新闻条目布局:1、顶部新闻;2、常规新闻;3、3图新闻;4、推广性新闻)。Data方面,每一个条目就是一条新闻对象,不同的新闻对象定义不同, 抽取其相同的共性进行继承。可以理解为:
*后台数据对象 ----(驱动)---->UI界面显示*
1、主界面布局 activity_main.xml
<ListView
android:id="@+id/myList"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:headerDividersEnabled="false"
xmlns:android="http://schemas.android.com/apk/res/android"></ListView>
就是简单的一个列表View。以后的设计,会将这一块作为一个module,嵌入到主界面中。
其对应的主Activity:
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ListView listView = (ListView) findViewById(R.id.myList);
List<NewsItem> newsItemList = getTestData();
listView.setAdapter(new NewsItemAdapter(this, newsItemList));
}
private List<NewsItem> getTestData() {
List<NewsItem> newsItemList = new ArrayList<>();
Resources resources = getResources();
TopNewsItem topNewsItem = new TopNewsItem();
topNewsItem.setBgImageBitmap(BitmapFactory.decodeResource(resources, R.drawable.laoren));
topNewsItem.setTitleImageBitmap(BitmapFactory.decodeResource(resources, R.drawable.global_icon_tag_pic));
topNewsItem.setTitle("老人晚年无人照顾,流泪哭诉");
topNewsItem.setItemType(ItemType.TOP_ONE_PICTURE);
NormalNewsItem normalNewsItem = new NormalNewsItem();
normalNewsItem.setItemType(ItemType.NORMAL_SINGLE_PICTURE);
normalNewsItem.setTitle("这是一个好新闻");
normalNewsItem.setCommentNum(99);
normalNewsItem.setCommentNumImageBitMap(BitmapFactory.decodeResource(resources,R