首页 > 代码库 > 友盟用户反馈自定义UI-Android

友盟用户反馈自定义UI-Android

友盟用户反馈SDK是友盟为开发者提供的组件之一,用户反馈也是每款应用必不可少的模块。如果你想方便的收集用户的反馈建议,并且与发送反馈的用户进行沟通交流,那么友盟用户反馈SDK是你不错的选择,使用友盟用户反馈SDK两行代码实现开发者和用户轻松高效沟通。从友盟BBS看到许多开发者都希望通过自定义UI,来实现用户反馈功能。下面就为大家来讲解如何使用友盟用户反馈SDK来制定UI。这里以一个demo来说明。

首先上图,这是自定义的UI界面:



技术分享

注:部分资源文件来源于某开源App


使用友盟用户反馈的数据接口,首先需要了解,SDK都提供了那些接口。根据集成文档,我们可以知道,对于用户反馈SDK来说,用户和开发者或者客服交流的整个内容是一个Conversation,其中包含了用户的反馈、追问以及客服的回复,而整个Conversation是由Reply组成的,用户的一条反馈或者是客服的一条回复都是一个Reply,每个Reply都有一些属性来表明Reply的各种信息。其中有:

type :

Reply.TYPE_DEV_REPLY            :  表示这是一条开发者的回复

Reply.TYPE_SUER_REPLY            表示这是一条用户的回复

Reply.TYPE_NEW_FEEDBACK    :  表示这是一条反馈 相当于用户的第一条回复


status:

Reply.STATUS_NOT_SENT         :表示该条回复没有发送成功或者还未发送

Reply.STATUS_SENDING            :表示该条回复正在发送

Reply.STATUS_SENT                   :表示该条回复已发送成功


created_at : 表示回复的时间,以毫秒为单位

Conversation类提供了getReplyList()方法来获取整个会话的内容,返回的是List<Reply>,同时也提供了addUserReply()方法,将用反馈内容加入到Conversation,那么Conversation实例怎么得到呢?

FeedbackAgent类中提供了一个getDefaultConversation()方法来获取默认的Conversation(),对于不需要创建多个会话的App来讲有这个就够了。

最重要的一个接口:

Comversation.sync()方法,该方法实现了数据的同步,即可以通过该方法发送用户反馈、回复也可以通过该方法获取来自开发者的回复。下面会详细介绍。

另外FeedbackAgent接口也提供了setUserInfo()方法来设置用户信息,以及getUserInfo()方法获取用户信息,关于用户信息的操作方法可以查看友盟用户反馈SDK集成文档,这里不做演示。

了解了这些,下面我们就开始噼里啪啦敲代码。


第一步当然是布局了,下面是自定义会话界面的布局

<RelativeLayout 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" >

    <LinearLayout
        android:id="@+id/fb_input_layout"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:orientation="vertical" >

        <View
            android:layout_width="match_parent"
            android:layout_height="@dimen/umeng_fb_item_line_height"
            android:background="@color/umeng_fb_line" />

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:clickable="true"
            android:focusable="true"
            android:focusableInTouchMode="true"
            android:orientation="horizontal"
            android:paddingBottom="8dp"
            android:paddingLeft="15dp"
            android:paddingRight="15dp"
            android:paddingTop="8dp" >

            <Button
                android:id="@+id/fb_send_btn"
                android:layout_width="70dp"
                android:layout_height="33dp"
                android:layout_alignParentEnd="true"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:background="@drawable/fb_send_btn_bg"
                android:gravity="center"
                android:text="@string/umeng_fb_send"
                android:textColor="@android:color/white"
                android:textSize="16sp" />

            <EditText
                android:id="@+id/fb_send_content"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginRight="10dp"
                android:layout_toLeftOf="@id/fb_send_btn"
                android:layout_toStartOf="@id/fb_send_btn"
                android:background="@drawable/fb_input_bg"
                android:hint="@string/umeng_fb_feedback"
                android:minHeight="33dp"
                android:paddingLeft="10dp"
                android:paddingRight="10dp"
                android:scrollbars="vertical"
                android:textSize="16sp" />
        </RelativeLayout>
    </LinearLayout>

    <android.support.v4.widget.SwipeRefreshLayout
        android:id="@+id/fb_reply_refresh"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/fb_input_layout" >

        <ListView
            android:id="@+id/fb_reply_list"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:divider="@null"
            android:listSelector="#00000000" >
        </ListView>
    </android.support.v4.widget.SwipeRefreshLayout>

</RelativeLayout>

布局文件就不多说了,这里包含了一个ListView来展示整个会话内容,还有一个输入框和发送按钮。


然后在Activity中开始利用友盟用户反馈SDK的数据接口干活。

要实现UI,这些View自然是少不了的

mListView = (ListView) findViewById(R.id.fb_reply_list);
sendBtn = (Button) findViewById(R.id.fb_send_btn);
inputEdit = (EditText) findViewById(R.id.fb_send_content);
//下拉刷新组件
mSwipeRefreshLayout = (SwipeRefreshLayout) findViewById(R.id.fb_reply_refresh);


获取Conversation对象,所有会话数据都在这里

Conversation mComversation = new FeedbackAgent(this).getDefaultConversation();

然后为ListView创建Adapter,代码比较简单,直接看注释吧

class ReplyAdapter extends BaseAdapter {

		@Override
		public int getCount() {
			return mComversation.getReplyList().size();
		}

		@Override
		public Object getItem(int arg0) {
			return mComversation.getReplyList().get(arg0);
		}

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

		@Override
		public int getViewTypeCount() {
			// 两种不同的Item布局
			return VIEW_TYPE_COUNT;
		}

		@Override
		public int getItemViewType(int position) {
			// 获取单条回复
			Reply reply = mComversation.getReplyList().get(position);
			if (Reply.TYPE_DEV_REPLY.equals(reply.type)) {
				// 开发者回复Item布局
				return VIEW_TYPE_DEV;
			} else {
				// 用户反馈、回复Item布局
				return VIEW_TYPE_USER;
			}
		}

		@Override
		public View getView(int position, View convertView, ViewGroup parent) {
			ViewHolder holder = null;
			// 获取单条回复
			Reply reply = mComversation.getReplyList().get(position);
			if (convertView == null) {
				// 根据Type的类型来加载不同的Item布局
				if (Reply.TYPE_DEV_REPLY.equals(reply.type)) {
					// 开发者的回复
					convertView = LayoutInflater.from(mContext).inflate(
							R.layout.custom_fb_dev_reply, null);
				} else {
					// 用户的反馈、回复
					convertView = LayoutInflater.from(mContext).inflate(
							R.layout.custom_fb_user_reply, null);
				}

				// 创建ViewHolder并获取各种View
				holder = new ViewHolder();
				holder.replyContent = (TextView) convertView
						.findViewById(R.id.fb_reply_content);
				holder.replyProgressBar = (ProgressBar) convertView
						.findViewById(R.id.fb_reply_progressBar);
				holder.replyStateFailed = (ImageView) convertView
						.findViewById(R.id.fb_reply_state_failed);
				holder.replyData = http://www.mamicode.com/(TextView) convertView>


创建Adapter并为ListView设置Adapter

adapter = new ReplyAdapter();
mListView.setAdapter(adapter);

会话列表完成了,接下来是发送反馈和App端与服务器数据的同步。

创建Handler对象来实现数据的刷新,用于Conversation或者Reply有更新时,刷新ListView。

private Handler mHandler = new Handler() {
		@Override
		public void handleMessage(Message msg) {
			adapter.notifyDataSetChanged();
		}
	};

然后是监听发送按钮的点击事件

sendBtn.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View v) {
				String content = inputEdit.getText().toString();
				inputEdit.getEditableText().clear();
				if (!TextUtils.isEmpty(content)) {
					// 将内容添加到会话列表
					mComversation.addUserReply(content);
					//刷新新ListView
					mHandler.sendMessage(new Message());
					//数据同步
					sync();
				}
			}
		});

下拉刷新操作

// 下拉刷新
mSwipeRefreshLayout.setOnRefreshListener(new OnRefreshListener() {
			@Override
			public void onRefresh() {
				sync();
			}
		});


sync方法为数据同步的方法,利用Comversation.sync方法来进行App端的数据与服务器端同步。该回调接口中onReceiveDevReply方法获得的replyList为开发者在友盟用户反馈Web端的回复。onSendUserReply方法获得的replyList则为本次同步数据中发送到服务器的用户反馈数据列表

// 数据同步
private void sync() {

		mComversation.sync(new SyncListener() {

			@Override
			public void onSendUserReply(List<Reply> replyList) {
			}

			@Override
			public void onReceiveDevReply(List<Reply> replyList) {
				// SwipeRefreshLayout停止刷新
				mSwipeRefreshLayout.setRefreshing(false);
				// 发送消息,刷新ListView
				mHandler.sendMessage(new Message());
				// 如果开发者没有新的回复数据,则返回
				if (replyList == null || replyList.size() < 1) {
					return;
				}
			}
		});
		// 更新adapter,刷新ListView
		adapter.notifyDataSetChanged();
	}

ListView Item的布局比较简单就不贴了,需要的话可以下载代码查看。


到这里一个利用友盟用户反馈SDK自定义的UI就实现了。



友盟用户反馈自定义UI-Android