关闭

Android开发学习之微信公众号界面

标签: 微信Android应用开发android应用android开发android
8730人阅读 评论(21) 收藏 举报
分类:

            接着上一篇博客中的卡片式设计,我们继续从微信中寻找一些线索,我们首先来看这样一个界面,这是微信中默认的一个公众号,主要是发布腾讯新闻上的最新动态,我们可以看出,它采用了类似于我们在上一篇文章中采用的卡片式布局。那么,今天就让我们一起来做这样一个界面吧!


           第一步,当然是创建layout_item的布局,即列表项目的布局,这里直接给出布局代码,代码并不复杂,只是属性设置较为繁琐。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/radius_bg"
    android:paddingBottom="10dp"
    android:orientation="vertical">
    <ImageView
        android:id="@+id/News_Pic"
        android:layout_width="wrap_content"
        android:layout_height="100dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginTop="10dp"
        android:contentDescription="@string/Description"
        android:scaleType="center" />
    <TextView
        android:id="@+id/News_Title"
        android:layout_width="wrap_content"
        android:layout_height="30dp"
        android:layout_alignLeft="@+id/News_Pic"
        android:layout_alignRight="@+id/News_Pic"
        android:layout_below="@+id/News_Pic"
        android:background="#707070"
        android:gravity="left|center"
        android:textColor="#ffffff"
        android:contentDescription="@string/Description"
        android:textIsSelectable="true" />

   <TextView
       android:id="@+id/News_Title1"
       android:layout_width="200dp"
       android:layout_height="45dp"
       android:layout_alignLeft="@+id/News_Title"
       android:layout_alignRight="@+id/News_Title2"
       android:layout_below="@+id/News_Title"
       android:layout_marginTop="10dp"
       android:gravity="center"
       android:textIsSelectable="true" />

    <ImageView
        android:id="@+id/News_Pic1"
        android:layout_width="45dp"
        android:layout_height="45dp"
        android:layout_alignRight="@+id/News_Title"
        android:layout_alignTop="@+id/News_Title1"
        android:contentDescription="@string/Description"
        android:scaleType="center" />

    <TextView
        android:id="@+id/News_Title2"
        android:layout_width="200dp"
        android:layout_height="45dp"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/News_Title1"
        android:layout_margin="10dp"
        android:layout_toLeftOf="@+id/News_Pic1"
        android:gravity="center"
        android:textIsSelectable="true" />

    <ImageView
        android:id="@+id/News_Pic2"
        android:layout_width="45dp"
        android:layout_height="45dp"
        android:layout_alignTop="@+id/News_Title2"
        android:layout_toRightOf="@+id/News_Title2"
        android:contentDescription="@string/Description"
        android:scaleType="center" />

    <TextView
        android:id="@+id/News_Title3"
        android:layout_width="200dp"
        android:layout_height="45dp"
        android:layout_alignLeft="@+id/News_Title1"
        android:layout_alignRight="@+id/News_Title2"
        android:layout_below="@+id/News_Title2"
        android:gravity="center"
        android:textIsSelectable="true" />

    <ImageView
        android:id="@+id/News_Pic3"
        android:layout_width="45dp"
        android:layout_height="45dp"
        android:layout_alignRight="@+id/News_Pic2"
        android:layout_alignTop="@+id/News_Title3"
        android:layout_toRightOf="@+id/News_Title2"
        android:contentDescription="@string/Description"
        android:scaleType="center" />

</RelativeLayout>

               第二步,我们需要为卡片编写一个圆角的形状radius_bg。代码和上一篇文章是一样的

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <solid android:color="#ffffff"/>
    <corners android:radius="10dp"/>
</shape>
          第三步,卡片类,这里卡片类共有两个,BaseCard为基类,Card为继承自BaseCard的一个类:

/*
 * 仿微信公众平台消息界面
 * @作者:秦元培
 * 
 */
package com.Android.WeChatCard;

public class BaseCard 
{
   private int mDrawable;

   private String mDescription;

   public BaseCard(int Drawable,String Description)
   {
	   this.mDrawable=Drawable;
	   this.mDescription=Description;
   }
   
   public int getDrawable() 
   {
	return mDrawable;
   }
   
   public void setDrawable(int mDrawable) 
   {
	this.mDrawable = mDrawable;
   }
   
   public String getDescription() 
   {
	return mDescription;
   }
   
   public void setDescription(String mDescription) 
   {
	this.mDescription = mDescription;
   }
   
}

package com.Android.WeChatCard;

import java.util.ArrayList;
import java.util.List;

public class Card extends BaseCard {


	private List<BaseCard> mSubCards;

	public Card(int Drawable, String Description) 
	{
		super(Drawable, Description);
		mSubCards=new ArrayList<BaseCard>();
	}
	
	public void AppendCard(BaseCard mCard)
	{
		mSubCards.add(mCard);
	}
	
	public List<BaseCard> getSubCards() 
	{
		return mSubCards;
	}

}

           第四步,我们来编写自定义适配器类CardAdapter:

package com.Android.WeChatCard;

import java.util.List;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

public class CardAdapter extends BaseAdapter {

	private Context mContext;
	private List<Card> mCards;
	public CardAdapter(Context mContext,List<Card> mCards)
	{
		this.mContext=mContext;
		this.mCards=mCards;
	}
	@Override
	public int getCount() 
	{
		return mCards.size();
	}

	@Override
	public Object getItem(int Index) 
	{
		return mCards.get(Index);
	}

	@Override
	public long getItemId(int Index) 
	{
		return Index;
	}

	@Override
	public View getView(int Index, View mView, ViewGroup mParent) 
	{
		     mView=LayoutInflater.from(mContext).inflate(R.layout.layout_item, null);
		     //头条消息
		     ImageView News_Pic=(ImageView)mView.findViewById(R.id.News_Pic);
		     News_Pic.setImageResource(mCards.get(Index).getDrawable());
		     TextView News_Title=(TextView)mView.findViewById(R.id.News_Title);
		     News_Title.setText(mCards.get(Index).getDescription());
		     //消息一
		     ImageView News_Pic1=(ImageView)mView.findViewById(R.id.News_Pic1);
		     News_Pic1.setImageResource(mCards.get(Index).getSubCards().get(0).getDrawable());
		     TextView News_Title1=(TextView)mView.findViewById(R.id.News_Title1);
		     News_Title1.setText(mCards.get(Index).getSubCards().get(0).getDescription());
		     //消息二
		     ImageView News_Pic2=(ImageView)mView.findViewById(R.id.News_Pic2);
		     News_Pic2.setImageResource(mCards.get(Index).getSubCards().get(1).getDrawable());
		     TextView News_Title2=(TextView)mView.findViewById(R.id.News_Title2);
		     News_Title2.setText(mCards.get(Index).getSubCards().get(1).getDescription());
		     //消息三
		    ImageView News_Pic3=(ImageView)mView.findViewById(R.id.News_Pic3);
		    News_Pic3.setImageResource(mCards.get(Index).getSubCards().get(2).getDrawable());
		    TextView News_Title3=(TextView)mView.findViewById(R.id.News_Title3);
		    News_Title3.setText(mCards.get(Index).getSubCards().get(2).getDescription());
		return mView;
	}
}

         由于每个头条消息下有三个消息,因此我们需要在构造Card的时候,使用AppendCard()方法添加三个BaseCard供这里绑定使用,这一点在使用的时候需要注意。

         第五步,主界面的布局和相关逻辑:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity" >
    <TextView
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:background="@drawable/tab_bg"
        android:gravity="center"
        android:textColor="#ffffff"
        android:textSize="18sp"
        android:text="@string/Title" />
    <ListView
        android:id="@+id/ListView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:divider="@null"
        android:dividerHeight="30dp"
        android:paddingLeft="20dp"
        android:paddingRight="20dp"
        android:scrollbarStyle="outsideOverlay" >
    </ListView>
</LinearLayout>

/*
 * 仿微信公众号消息界面
 * 作者:秦元培
 * 时间:2013年12月30日
 * 这个程序的原理是重写适配器,然后绑定列表。我觉得微信的实现原理应该使用的ScrollView吧
 * 这个程序目前的缺点有:
 * 1、Card和BaseCard两个类还需要完善
 * 2、滚动条不是在屏幕边缘,而是在卡片边缘,也就是说这个方法本身有问题.[解决方法:scrollbarStyle="outsideOverlay]
 * 3、两个卡片间的间距问题无法解决,尝试着用了divider和dividerHeight属性,发现有一定的色差[解决方法:android:divider="@null"]
 * 4、如果要实现微信的那个通知,需要增加一个布局、一个类型判断
 * 5、当图片较多时解决内存消耗的问题
 */
package com.Android.WeChatCard;

import java.util.ArrayList;
import java.util.List;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.Window;
import android.widget.ListView;

public class MainActivity extends Activity {

	private ListView mListView;
	private CardAdapter mAdapter;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		this.requestWindowFeature(Window.FEATURE_NO_TITLE);
		setContentView(R.layout.layout_main);
		mListView=(ListView)findViewById(R.id.ListView);
		mAdapter=new CardAdapter(this,getItems());
		mListView.setAdapter(mAdapter); 
	}

	private List<Card> getItems() 
	{
		List<Card> mCards=new ArrayList<Card>();
		//第一个卡片
		Card mCard=new Card(R.drawable.pic_0,"这是第一个头条信息");
		BaseCard mBaseCard1=new BaseCard(R.drawable.pic_0,"这是第一个文本消息");
		BaseCard mBaseCard2=new BaseCard(R.drawable.pic_0,"这是第一个文本消息");
		BaseCard mBaseCard3=new BaseCard(R.drawable.pic_0,"这是第一个文本消息");
		mCard.AppendCard(mBaseCard1);
		mCard.AppendCard(mBaseCard2);
		mCard.AppendCard(mBaseCard3);
		//添加卡片
		mCards.add(mCard);

		//第二个卡片
		mCard=new Card(R.drawable.pic_1,"这是第二个头条信息");
		mBaseCard1=new BaseCard(R.drawable.pic_1,"这是第一个文本消息");
		mBaseCard2=new BaseCard(R.drawable.pic_1,"这是第一个文本消息");
		mBaseCard3=new BaseCard(R.drawable.pic_1,"这是第一个文本消息");
		mCard.AppendCard(mBaseCard1);
		mCard.AppendCard(mBaseCard2);
		mCard.AppendCard(mBaseCard3);
		//添加卡片
		mCards.add(mCard);

		//第三个卡片
		mCard=new Card(R.drawable.pic_2,"这是第三个头条信息");
		mBaseCard1=new BaseCard(R.drawable.pic_2,"这是第一个文本消息");
		mBaseCard2=new BaseCard(R.drawable.pic_2,"这是第一个文本消息");
		mBaseCard3=new BaseCard(R.drawable.pic_2,"这是第一个文本消息");
		mCard.AppendCard(mBaseCard1);
		mCard.AppendCard(mBaseCard2);
		mCard.AppendCard(mBaseCard3);
		//添加卡片
		mCards.add(mCard);
		
		
		//第四个卡片
		mCard=new Card(R.drawable.pic_3,"这是第四个头条信息");
		mBaseCard1=new BaseCard(R.drawable.pic_3,"这是第一个文本消息");
		mBaseCard2=new BaseCard(R.drawable.pic_3,"这是第一个文本消息");
		mBaseCard3=new BaseCard(R.drawable.pic_3,"这是第一个文本消息");
		mCard.AppendCard(mBaseCard1);
		mCard.AppendCard(mBaseCard2);
		mCard.AppendCard(mBaseCard3);
		//添加卡片
		mCards.add(mCard);
		
		return mCards;
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}

}

               最终运行效果如图所示:


       至于微信中的消息发送时间的实现,大家可以参考这篇文章:

       http://blog.csdn.net/qinyuanpei/article/details/17727767

3
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

android仿微信公众帐号自定义菜单

  • 2015-03-10 11:26
  • 1.43MB
  • 下载

Android 高仿微信实时聊天 基于百度云推送

转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/38799363 ,本文出自:【张鸿洋的博客】一直在仿微信界面,今天终于有幸利用百度云推送仿一仿微信聊天了~~~首先特别感谢:weidi1989分享的Android之基于百度...
  • lmj623565791
  • lmj623565791
  • 2014-08-24 23:00
  • 115325

Android跳转到微信公众号

Android跳转到微信公众号
  • lingruimingfeng
  • lingruimingfeng
  • 2016-07-01 14:33
  • 6911

一个三年Android开发的总结-开篇

一个三年Android开发的总结-开篇 转眼间全职从事Android开发已有三年,想把这一阶段的积累总结记录并展现出来,作为Android开发必备的知识,希望对有一定Android开发基础的人进阶有裨益,倘若能让一些人少走些弯路,也算作是我做的一件有意义的事情。如果其中有不足或疏漏之处,还请指出,...
  • w7849516230
  • w7849516230
  • 2016-03-13 23:10
  • 13460

微信公众号开发index.php

博主今天接手一个微信公众号开发,总结了一个处理各种事件的index.php。灰常见到,直接copy到微信绑定的url里面设置的index.php就行。不多说直接上代码。<?php define("TOKEN", "weixin"); $wechatOb...
  • qq_16558621
  • qq_16558621
  • 2015-12-05 21:39
  • 3293

Android获取微信公众号推送消息历史记录

Android获取微信公众号推送消息历史记录
  • gaolei1201
  • gaolei1201
  • 2016-03-17 16:23
  • 3206

java微信公众号开发系列——入门

公众号类型: 订阅号:面向个人,每天群发1条,扫码即可关注,不支持高级接口(微信支付) 服务号:面向企业和政府,每个月4条,扫码即可关注,支持高级接口 企业号:面向企业政府,每分钟200条,通讯录成员才可关注,支持高级接口 公众号申请: 微信公众平台:https://mp.weixin.qq...
  • u011698346
  • u011698346
  • 2016-11-08 11:16
  • 1422

最近在做微信公众号支付功能,iOS正常唤起微信支付并支付成功;android唤不起微信支付,显示失败。

在调用微信支付的时候遇到提示“URL未注册”,这通常是因为没有在微信支付后台正确配置授权目录的问题,但我所遇到的并非如此。 我们的应用中有3个页面用到微信支付: http://example.com/#!/cart/index http://example.com/#!/order/orde...
  • chenzfyy
  • chenzfyy
  • 2017-01-21 14:22
  • 3604

springMVC中微信公众平台开发

servicepackage cn.bluemobi.service;import java.util.Arrays;import org.springframework.stereotype.Service; import org.springframework.transaction.annot...
  • Kiss_Mark
  • Kiss_Mark
  • 2015-07-23 12:09
  • 3902

微信公众号的调试与测试

作者:杨广辉 一、微信公众号简介 1、微信公众号介绍 微信公众号是开发者或商家在微信公众平台上申请的应用账号,该帐号与QQ账号互通,通过公众号,商家可在微信平台上实现和特定群体的文字、图片、语音、视频的全方位沟通、互动 。微信公众号主要面向名人、政府、媒体、企业等机构推出的合作推广...
  • kaka1121
  • kaka1121
  • 2016-10-25 10:57
  • 7424
    个人资料
    • 访问:1448050次
    • 积分:15521
    • 等级:
    • 排名:第828名
    • 原创:207篇
    • 转载:0篇
    • 译文:0篇
    • 评论:1397条
    公众号推广

     欢迎订阅公众号【5厘米的理想】
     一起:探讨技术心得,交流生活感悟
    关于作者
    Payne,一名文艺的程序员
    19岁以前写诗,19岁以后写代码
    欢迎大家同我:
    探讨技术心得,交流生活感悟
    -------------------------------------------
    个人博客:->点此访问
    知乎专栏:->点此访问
    -------------------------------------------
    微信:@PayneQin(请说明来意)
    微博:@飞鸿踏雪(请随意关注)
    知乎:@飞鸿踏雪(请随意关注)
    邮件:qinyuanpei@163.com(请说明来意)
    最新评论