Android TextView UI

Display rich text

rendering

3. Layout file


      
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    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:id="@+id/text1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="20dp"/>

    <TextView
        android:id="@+id/text2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="20dp"
        android:autoLink="all"/>


</LinearLayout>
Copy the code

Logic code

public class MainActivity extends AppCompatActivity {
    @BindView(R.id.text1)
    TextView mTextView1;

    @BindView(R.id.text2)
    TextView mTextView2;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);

        String html = "<font color ='red'>Hello android</font><br/>";
        html+="<font color='#0000ff'><big><i>Hello android</i></big></font><p>";
        html+="< big > < a href =" http://www.baidu.com "> baidu < / a > < / big >";

        // Use html. fromHtml to convert strings containing Html tags into displayable text styles
        Spanned spanned = Html.fromHtml(html, Html.FROM_HTML_MODE_LEGACY);
        mTextView1.setText(spanned);

        mTextView1.setMovementMethod(LinkMovementMethod.getInstance());

        String text="My URL:http://www.cnblogs.com/plokmju/\n";
        text+="My email:[email protected] \ n";
        text+="My phone number: +86 010-12345678"; mTextView2.setText(text); }}Copy the code

Two, running lantern effect

1. Horizontal running lantern

Effect:

Single implementation running lantern:


      
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.gyq.marqueedemo.marqueedemo.MainActivity">

    <TextView
        android:id="@+id/tv_name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ellipsize="marquee"
        android:focusable="true"
        android:singleLine="true"
        android:marqueeRepeatLimit="marquee_forever"
        android:focusableInTouchMode="true"
        android:text="@string/hello_word"/>
    

</LinearLayout>

Copy the code

1, a custom class, inherit TextView;

package com.gyq.marqueedemo.marqueedemo.widget;

import android.annotation.SuppressLint;
import android.content.Context;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.widget.TextView;

/** * Created by gyq on 2018/1/5 13:42 */

@SuppressLint("AppCompatCustomView")
public class MarqueeTextView extends TextView {
    public MarqueeTextView(Context context) {
        super(context);
    }

    public MarqueeTextView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    public MarqueeTextView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    public boolean isFocused(a) {
        return true; }}Copy the code

Layout file:


      
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.gyq.marqueedemo.marqueedemo.MainActivity">

    <com.gyq.marqueedemo.marqueedemo.widget.MarqueeTextView
        android:id="@+id/tv_name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ellipsize="marquee"
        android:focusable="true"
        android:singleLine="true"
        android:marqueeRepeatLimit="marquee_forever"
        android:focusableInTouchMode="true"
        android:text="@string/hello_word"/>
    <com.gyq.marqueedemo.marqueedemo.widget.MarqueeTextView
        android:id="@+id/tv_content"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:ellipsize="marquee"
        android:focusable="true"
        android:singleLine="true"
        android:marqueeRepeatLimit="marquee_forever"
        android:focusableInTouchMode="true"
        android:text="@string/hello_word"/>

</LinearLayout>

Copy the code

3. Vertical running lantern

3.1 rendering

3.2 the Bean class

public class FootBall {
    private String name;
    private String title;

    public String getName(a) {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getTitle(a) {
        return title;
    }

    public void setTitle(String title) {
        this.title = title; }}Copy the code

3.3 Customizing the View

import android.content.Context;
import android.os.Handler;
import android.util.AttributeSet;
import android.view.View;
import android.view.animation.AnimationUtils;
import android.widget.ViewAnimator;

import com.epro.test.R;

import java.util.List;

/**
 * Created on 2019/11/26 16:13
 *
 * @author Gong Youqiang
 */
public class VerticalMarquee extends ViewAnimator {
    private static final long DEFAULT_TIMER = 2000L;
    private long delayTime = DEFAULT_TIMER;
    private int viewIndex;
    private List<View> views;
    private static Handler handler = new Handler();
    private boolean started;// Whether the rotation has started
    
    public VerticalMarquee(Context context) {
        this(context,null);
    }

    public VerticalMarquee(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init(a) {
        this.setInAnimation(AnimationUtils.loadAnimation(this.getContext(), R.anim.vertical_marquee_in));
        this.setOutAnimation(AnimationUtils.loadAnimation(this.getContext(), R.anim.vertical_marquee_out));
    }

    protected void onFinishInflate(a) {
        super.onFinishInflate();
    }

    private void startMarquee(a) {
        if (this.views ! =null) {
            if (this.views.size() > 1) {
                handler.postDelayed(new Runnable() {
                    public void run(a) {
                        VerticalMarquee.this.viewIndex++;
                        if (VerticalMarquee.this.viewIndex >= VerticalMarquee.this.views.size()) {
                            VerticalMarquee.this.viewIndex = 0;
                        }
                        showNext();
                        VerticalMarquee.handler.postDelayed(this, delayTime);
                    }
                }, delayTime);
                started = true;
            } else if (this.views.size() > 0) {
                this.viewIndex = 0;
            } else {
                this.viewIndex = 0; }}else {
            this.viewIndex = 0; }}/** * get the currently displayed View * change the method name to avoid the same name as the parent method **@return View
     */
    public View getCurView(a) {
        if (this.views ! =null && this.viewIndex >= 0 && this.viewIndex < this.views.size()) {
            return this.views.get(this.viewIndex);
        }

        return null;
    }

    /** * Get the index of the current View@return index
     */
    public int getCurIndex(a) {
        return this.viewIndex;
    }

    /** * Sets the View list for rotation, this method will automatically rotate **@paramViews View list */
    public void setViewList(List<View> views) {
        setViewList(views, DEFAULT_TIMER);
    }

    /** * Sets the View list for rotation, this method will automatically rotate **@paramViews View list *@paramDelayTime Intermittent time */
    public void setViewList(final List<View> views, long delayTime) {
        if (views == null || views.size() == 0) {
            return;
        }
        if (delayTime >= 100) {
            // At least 100 milliseconds, otherwise default
            this.delayTime = delayTime;
        }
        this.views = views;
        handler.removeCallbacksAndMessages(null);
        started = false;
        post(new Runnable() {
            @Override
            public void run(a) {
                for(View view : views) { addView(view); } startMarquee(); }}); }// Start the countdown (rotation), which is called when the page is visible and automatic rotation is required
    public void startTimer(a) {
        if (started || views == null || views.size() <= 1) {
            return;
        }
        stopTimer();
        startMarquee();
    }

    // Stop the countdown (rotation) if startTimer() was called; Call this method to stop automatic rotation when the page is not visible
    public void stopTimer(a) {
        if(handler ! =null) {
            handler.removeCallbacksAndMessages(null);
            started = false; }}}Copy the code

3.4 Creating the anim folder vertical_marquee_out.xml


      
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fromYDelta="0"
    android:toYDelta="-100%p" >

</translate>
Copy the code

vertical_marquee_out.xml


      
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fromYDelta="100%p"
    android:toYDelta="0">

</translate>
Copy the code

3.5 Layout file activity.xml


      
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/black"
        android:textSize="26sp"
        android:text="Headline"/>

    <com.epro.test.widget.VerticalMarquee
        android:id="@+id/vm_root"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
</LinearLayout>
Copy the code

marquee_item.xml


      
<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="44dp">

    <TextView
        android:id="@+id/marquee_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="8dp"
        android:layout_marginBottom="8dp"
        android:background="@color/text_bg"
        android:paddingLeft="10dp"
        android:paddingTop="5dp"
        android:paddingRight="10dp"
        android:paddingBottom="5dp"
        android:textColor="@color/text_color"
        android:textSize="11dp"
        tools:text="Here's the title." />

    <TextView
        android:id="@+id/marquee_desc"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_weight="1"
        android:ellipsize="end"
        android:maxLines="1"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:textColor="@color/black"
        android:textSize="14dp"
        tools:text="Here is the content ~" />
</LinearLayout>
Copy the code

3.6 MainActivity. Java

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.TextView;

import androidx.appcompat.app.AppCompatActivity;

import com.epro.test.bean.FootBall;
import com.epro.test.widget.VerticalMarquee;

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

import butterknife.BindView;
import butterknife.ButterKnife;

public class MainActivity extends AppCompatActivity {
    @BindView(R.id.vm_root)
    VerticalMarquee mText;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);

        initData();

    }

    private void initData(a) {
        List<View> views = new ArrayList<>();
        LayoutInflater inflater = LayoutInflater.from(this);
        FootBall ballx = new FootBall();
        ballx.setName("Serie a");
        ballx.setTitle("Surrey votes for Cristiano Ronaldo");
        views.add(inflateView(inflater, mText, ballx));

        FootBall bally = new FootBall();
        bally.setName("The premier league." ");
        bally.setTitle("Jose Mourinho as manager of Tottenham");
        views.add(inflateView(inflater, mText, bally));

        FootBall ballh = new FootBall();
        ballh.setName("The Spanish");
        ballh.setTitle("Real Madrid Vs Barcelona on December 4th.");
        views.add(inflateView(inflater, mText, ballh));
        mText.setViewList(views);
    }

    private View inflateView(LayoutInflater inflater, VerticalMarquee marqueeRoot, FootBall ball) {
        if (inflater == null) {
            inflater = LayoutInflater.from(this);
        }
        View view = inflater.inflate(R.layout.marquee_item, marqueeRoot, false);
        TextView viewName = view.findViewById(R.id.marquee_name);
        TextView viewDesc = view.findViewById(R.id.marquee_desc);
        viewName.setText(ball.getName());
        viewDesc.setText(ball.getTitle());
        returnview; }}Copy the code

Display fonts of different sizes

rendering

2. activity_main.xml


      
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">


    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="96dp"
        android:text="TextView"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="48dp"
        android:layout_marginEnd="3dp"
        android:text="TextView"
        app:layout_constraintEnd_toEndOf="@+id/textView"
        app:layout_constraintTop_toBottomOf="@+id/textView" />

</androidx.constraintlayout.widget.ConstraintLayout>
Copy the code

StrUtil.java

/**
 * created on 2020/5/13 21:43
 *
 * @author Scarf Gong
 */
public class StrUtil {
    public static String formatToSepara(String data) {
        try {
            double value = Double.parseDouble(data);
            DecimalFormat df = new DecimalFormat("# # # #");
            return df.format(value);
        } catch (Exception e) {
            e.printStackTrace();
        }
        returndata; }}Copy the code

MainActivity.java

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        TextView textView = findViewById(R.id.textView);
        String data1 = StrUtil.formatToSepara("6663") +"/ 10000";
        Spannable sp = new SpannableString(data1);
        sp.setSpan(new AbsoluteSizeSpan(25.true),0,data1.length() - 6,
                Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
        textView.setText(sp);

        TextView textView2 = findViewById(R.id.textView2);
        String data2 = StrUtil.formatToSepara("28") +"Minutes";
        Spannable sp2 = new SpannableString(data2);
        sp2.setSpan(new AbsoluteSizeSpan(25.true),0,data2.length() - 2, Spanned.SPAN_INCLUSIVE_EXCLUSIVE); textView2.setText(sp2); }}Copy the code

Display rich text

Two, running lantern effect

Display fonts of different sizes

Related Posts

Huawei Hongmeng OS is released! Ark supports hybrid compilation, will eventually replace Android?

Design Pattern – Builder Pattern (Builder Pattern)

RocooFix Thermal repair framework